究竟是什么触发了 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 中。因此，应用程序知道该去哪里。

标签： angular angular-cli

【解决方案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) 引导应用程序

【讨论】：