Angular 应用是如何启动的——幕后故事！

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

今天我们将学习Angular中的应用程序流程，也
就是应用程序启动时会发生什么。

这虽然只是一种理论，但如果你想精通Angular，这却是一个非常重要的理论。

1️⃣ angular.json

打开 Angular 项目后，您可能会注意到项目根目录下有一个文件—— 这是一个非常重要的文件，其中包含运行 Angular 应用所需的几个重要配置信息。 我很快会提供详细的概述。angular.json

应用程序首次启动时，Angular 会查找此文件。

现在，如果您打开该文件，您会在 architect -> build -> optionsmain下找到一个名为 main 的节点 。Angular 找到该文件后，会开始查找 main 节点。main 节点的值是 Angular 正在查找的文件路径——位于 src 文件夹下。



main.ts

2️⃣ main.ts
这是主入口点。举个例子，如果您之前了解 C/C++/Java，您一定见过 main 函数也是程序的入口点。
该main.ts文件位于该src文件夹下。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from 
'@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

platformBrowserDynamic创建平台。此函数还用于引导 Angular 应用程序。这里我们指定应用程序首次启动时要加载的第一个模块——根模块，也就是引导模块。

3️⃣ app.module.ts
一旦 angular 找到起始模块app.module.ts（所有与此模块关联的组件/指令/管道都存在，并且对其他模块的依赖也存在），它就会查找 bootstrap 选项 - 其中已指定起始组件名称 - 在本例中为 AppComponent。

现在Angular编译器已经拥有了运行所需的所有信息。

4️⃣ index.html
现在 index.html 文件已加载并开始解析。一旦找到选择器，它就能准确地知道要加载哪个组件，并将 AppComponent 显示在屏幕上。

就这样，申请流程就此开始。

希望您喜欢这篇文章。

如果你喜欢，请点赞❤️分享💞评论🧡。

接下来会有更多关于Angular的主题，
敬请期待。

我会在推特上分享更多Angular JavaScript TypeScript CSS技巧和窍门。

希望也能在那里见到你😃

干杯🍻
编程愉快