Question

通过构建基本的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里面定义了哪个？

Answer 1

是的，只有angular-cli.json引用它来处理应用程序的启动。

main.ts不是一个模块，而是一个简单的脚本文件，从上到下执行，可以有任何其他文件名。

唯一影响它作为.ts文件的东西是tsconfig.json，它处理到javascript的转换。但它是通过* .ts文件名模式实现的，而不是单独引用文件。

Answer 2

否Vendor.bundle.js 不包含角度代码。它包含第三方插件，例如。我们包含在package.json中的bootstrap，jquery，jquery插件。它不负责引导角度应用。
在 main.ts 文件的最后一行 platformBrowserDynamic（）。bootstrapModule（AppModule）负责角应用程序的引导。 platformBrowserDynamic（）此行的一部分表示我们即将在浏览器环境中启动Angular。

3. bootstrapModule（）函数有助于引导我们的根模块将根模块作为其参数。

AppModule 是我们的根模块，它是我们应用程序的入口模块，它实际上可以是我们应用程序中的任何模块，但按照惯例，AppModule用作根模块。

5.在我们的 AppModule 中，我们需要指定将作为应用程序入口点组件的组件。在我们的 app.module.ts 文件中，我们导入条目组件（通常是AppComponent）并将其作为NgModule配置对象内引导程序数组中的唯一项目提供。例如。的自举[AppComponent]

Answer 3

main.bundle.js 是负责启动引导过程的人。

它是由Angular编译器基于从 angular.json 读取的配置构建的，该文件表明 main.ts 是主引导程序文件。

Answer 4

在Angular 7（Angular CLI项目）中，angular.json文件包含所有项目信息，其中包含有关完整项目资产的信息。在此文件中，可以将main配置为任何类型的脚本文件，然后可以将其用作已配置应用程序的模块启动器，例如start.ts。现在，start.ts将作为应用程序模块的起点，理想情况下，该模块应负责使用platformBrowserDynamic（）。bootstrapModule（YourModuleStarter）自举应用程序

Answer 5

main.ts文件是我们的Web应用程序的入口点，它编译Web应用程序并引导AppModule在浏览器中运行。首先导入我们需要的基本模块。

platformBrowserDynamic（）。bootstrapModule（AppModule）

此代码引用了父模块（即AppModule）。因此，当它在浏览器中执行时，称为的文件是index.html。 index.html在内部引用了main.ts文件，该文件调用了父模块（即AppModule）。

调用AppModule时，它会调用app.module.ts，并根据引导程序进一步调用AppComponent。

引导程序：[AppComponent]

在app.component.ts中，在index.html文件中使用了选择器：“ app-root” 。这将显示app.component.html中存在的内容。

究竟是什么触发了Angular中的main.ts

5 个答案: