Photo by Tudor Baciu on Unsplash

Angular 有时会令人困惑，其中一个让人困惑的问题是，哪个文件先在其中执行。这个问题也困扰了我好长一段时间然后查了很多解释才明白。所以我想为什么不写一篇关于这个话题的文章，这样其他人可以从中受益。

所以我们开始吧，一路顺风！

当我们创建一个 angular 应用程序时，我们会看到大量的文件比如 angular.json, package.json, package-lock.json, src folder etc.

当我们运行 ng ser

“index”: “src/index.html”

“main”: “src/main.ts”

It loads up *main.ts* (first file that executes) and read its content. In this file we specify which environment to use for our application and the most important thing, which module to bootstrap, the code is as follows:

它装载了main . ts（执行的第一个文件）并阅读其内容。在这个文件中，我们指定了应用程序使用的环境以及最重要的引导模块，代码如下：

platformBrowserDynamic().bootstrapModule(AppModule)

这意味着要启动应用程序，第一个要加载（引导）的模块是App Module。然后读取a page module . ts文件。

bootstrap: [AppComponent]

在这个文件中，我们指定要引导的组件，所有的依赖项是什么，等等。它只加载引导数组中指定的组件并加载它。在这里，它将加载App Component 并使用其选择器名称注册该组件。在app.component.ts我们看到选择符是**"app-root"**

当浏览器尝试加载它首先加载的应用程序时该index. html。这是一个一般html包含头部、身体等的文件。在这个文件中，我们看到一个标记：

<app-root></app-root>

在构建我们的应用程序时，它会插入在index.html文件中呈现角组件所需的所有脚本。正如我们前面所讨论的，APP组件的选择器是app-root。浏览器读取此标记并使用所提供的脚本加载app-Component代替此标记。

结语

因此，当一个 Angular 应用程序启动时，首先加载main . ts文件，这里我们引导根模块即app.module.ts在这个模块中，我们指定一个组件作为引导组件，并告诉 angular 在启动时加载这个组件及其所有依赖项，并注册它的选择器app - root 。

现在当浏览器加载index.html文件，它知道什么是app - root并呈现此组件的所有内容。 谢谢观看！