要弄清楚 Angular 的啟動過程，就要弄明白 Angular 啟動時加載了哪個頁面，加載了哪些腳本，這些腳本做了哪些事？

通過 Angular 的編譯依賴文件 .angular-cli.json 可以看到 apps 這個對象類的數組

這個對象中有 root 這個屬性，這個是 Angular 應用的根目錄，也即是 src 目錄是 Angular 應用的根目錄。

這個對象中有 index 這個屬性，這個是 Angular 啟動時加載的頁面，也即是 src 目錄下的 index.html 是 Angular 啟動時加載的頁面。

這個對象中有 main 這個屬性，這個是 Angular 啟動時加載的腳本，也既是 src 目錄下的 main.ts 是 Angular 啟動時加載的腳本

main.ts 文件內容如下

1. 引入 enableProdMode 模塊，可以通過這個方法來關閉 Angular 的開發者模式，if(environment.production){enableProdMode();}如果為生產環境則關閉開發者模式，

2. Angular 導入 platformBrowserDynamic 模塊來啟動這個應用，

3. 導入命令行工具生成的整個應用的主模塊 AppModule，

4. 導入環境配置文件 environment, 通過該目錄下的 environment.prod.ts 配置文件配置生產環境，通過 environment.ts 文件來配置開發環境，還可以自定義測試環境，如 environment.test.ts

Angular 通過 AppModule 模塊來啟動應用，並加載該模塊需要的子模塊

app.module.ts 內容如下：

1. 向外暴露了一個 AppModule 類。

2. 使用 NgModule 裝飾器生命了一個模塊

3. declarations 申明模塊中有什麽東西，該申明中只能聲明組件、指令、管道

4. imports 申明要讓應用正常運轉還需要什麽東西，因為程序要運行在瀏覽器中，所以 BrowserModule 模塊是必須要的。

5. providers 申明模塊中需要用到的服務

6. bootstrap 屬性申明了主組件

Angular 應用在加載時，會加載 AppModule 模塊以及該模塊所依賴的所有子模塊。

為了弄明白加載的頁面，分析 app.comonment.ts 這個組件：

1. 從 angular 核心模塊中引入 Component 組件模塊，

2. 在元數據裝飾器中指明了選擇器 app-root ，模板 app.comonent.html，樣式 app.component.css，

3. 在 AppComponent 類中，定義了 title 屬性，並為其賦值。

在 index.html 中

<app-root></app-root> 這裏的內容將會被替換，替換內容為選擇器為 app-root 的模板內容，既是 app.component.html 的內容：

1. 該模板中，{{title}} 是插值表達式，被其控制器的類的屬性 title 值替換為 “app”。

於是，啟動 Angular 應用並在瀏覽器中查看時，先顯示“歡迎...”，隨後被替換為 app.component.html 的內容：

Angular總結二：Angular 啟動過程