究竟是啥触发了 Angular 中的 main.ts
Posted
技术标签:
【中文标题】究竟是啥触发了 Angular 中的 main.ts【英文标题】：What exactly triggers main.ts in Angular究竟是什么触发了 Angular 中的 main.ts 【发布时间】：2018-10-10 09:57:37 【问题描述】：通过构建一个基本的 Angular CLI 项目，我们在运行应用程序时得到以下index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SimpleCLI</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js">
</script><script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script></body>
</html>
下一步是我们的入口点 main.ts。当然名称无关紧要，在 .angular-cli.json 中定义。有人可以澄清以下几点吗？
是vendor.bundle.js 包含所有 Angular 代码并负责启动引导过程吗？
一旦启动过程开始究竟是如何应用程序知道去哪里，即它如何触发main.ts？难道只有财产吗
"main": "main.ts"
在.angular-cli.json 里面是哪个定义的？
【问题讨论】：
在 .angular-cli.json 中你得到了"root": "src"、"index": "index.html" 和"main": "main.ts"。 index.html 和 main.ts 都位于 src 中。因此，应用程序知道该去哪里。
【参考方案1】：
是的，只有 angular-cli.json 引用它来处理应用程序的启动。
main.ts 不是一个模块，而是一个简单的脚本文件，从上到下执行，可以有任何其他文件名。
作为 .ts 文件影响它的唯一其他因素是 tsconfig.json，它处理转译为 javascript。但它是通过 *.ts 文件名模式而不是通过单独引用文件来实现的。
【讨论】：
【参考方案2】：No Vendor.bundle.js 不包含角度代码。它包含 3rd 方插件，例如。 bootstrap、jquery、jquery 插件，我们包含在 package.json 中。 它不负责引导 Angular 应用程序。
在 main.ts 文件最后一行 platformBrowserDynamic().bootstrapModule(AppModule) 负责 Angular 应用程序的引导。此行的 platformBrowserDynamic() 部分表示我们即将在浏览器环境中启动 Angular。
3.bootstrapModule() 函数帮助引导我们的根模块，以根模块作为参数。
-
AppModule 是我们的根模块，它是我们应用程序的入口模块，它实际上可以是我们应用程序中的任何模块，但按照惯例，AppModule 被用作根模块。
5.在我们的AppModule中，我们需要指定将作为应用程序入口点组件的组件。在我们的 app.module.ts 文件中，我们导入入口组件（通常是 AppComponent）并将其作为 NgModule 配置对象内的引导数组中的唯一项提供。例如。 引导[AppComponent]
【讨论】：
【参考方案3】：main.ts 文件是我们 web-app 的入口点。它编译 web-app 并引导 AppModule 在浏览器中运行。 首先导入我们需要的基本模块。
platformBrowserDynamic().bootstrapModule(AppModule)
此代码引用了父模块，即 AppModule。因此，当它在浏览器中执行时，调用的文件是 index.html。 index.html 内部引用了调用父模块的 main.ts 文件，即 AppModule。
当 AppModule 被调用时，它会调用 app.module.ts，它会根据 bootstrap 进一步调用 AppComponent。
引导程序：[AppComponent]
在 app.component.ts 中，有 selector:"app-root" 用于 index.html 文件。这将显示 app.component.html 中的内容。
【讨论】：
【参考方案4】：main.bundle.js 负责启动引导过程。
它是由 Angular 编译器基于从 angular.json 读取的配置构建的，这表明 main.ts 是主引导文件。
【讨论】：
【参考方案5】：在 Angular 7（Angular CLI 项目）中，angular.json 文件包含所有项目信息，其中包含有关完整项目资产的信息。在此文件中，main 可以配置为任何类型的脚本文件，然后该文件可以充当已配置应用程序的模块启动器，例如 start.ts。 现在 start.ts 将作为应用程序模块的起点，理想情况下，它应该负责使用 platformBrowserDynamic().bootstrapModule(YourModuleStarter) 引导应用程序
【讨论】：
以上是关于究竟是啥触发了 Angular 中的 main.ts的主要内容，如果未能解决你的问题，请参考以下文章
这个 Angular 2 应用程序中的服务层次结构究竟是如何工作的？