在前面有一片博客中写到 用Angular Cli 构建 Angular 项目，那接着这里来了解下Angular项目的启动过程。
项目启动主要通过../src下的两个文件，main.ts 和index.html。
main.ts加载脚本，负责引导整个Angular应用的起点。
index.html加载页面，寻找启动模块（AppModule）指定的主组件对应的选择器。
Angular 启动过程
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 导入enableProdMode用来关闭angular开发者模式
import { enableProdMode } from '@angular/core';
// 负责从angular浏览器模块中导入platformBrowserDynamic这个方法，
// 这个方法告诉angular使用哪个模块来启动整个应用
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 整个应用的主模块
import { AppModule } from './app/app.module';
// angular多环境支持
import { environment } from './environments/environment';
if (environment.production) {
// 如果是工厂模式，就启动enableProdMode来关闭开发者模式
enableProdMode();
}
// 调用bootstrapModule方法来传入AppModule作为启动模块来启动应用。
platformBrowserDynamic().bootstrapModule(AppModule);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mytest</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>
//appcomponent启动后加载完所有依赖会寻找到index里面的app-root，会根据app-root找到叫app-root的css
选择器，去加载这个选择器所对应的html内容，在app-root的位置替代aoo-root显示
<app-root></app-root>
</body>
</html>
