應(yīng)用外殼

應(yīng)用外殼是一種在構(gòu)建期間借助路由渲染部分應(yīng)用的方法。它可以通過(guò)快速啟動(dòng)一個(gè)靜態(tài)渲染頁(yè)面（所有頁(yè)面的公共骨架）來(lái)改善用戶體驗(yàn)。與此同時(shí)，瀏覽器會(huì)下載完整的客戶端版本，并在代碼加載后自動(dòng)切換到完整版。

這能讓用戶快速看到應(yīng)用中第一個(gè)有意義的畫面，因?yàn)闉g覽器可以渲染出 HTML 和 CSS，而無(wú)需初始化任何 JavaScript。

欲知詳情，參閱應(yīng)用外殼模型。

第 1 步：準(zhǔn)備本應(yīng)用

可以用下列 CLI 命令來(lái)執(zhí)行本操作：

ng new my-app --routing

對(duì)于既有應(yīng)用，你必須手動(dòng)添加 ?RouterModule ?并在應(yīng)用中定義 ?<router-outlet>?。

第 2 步：創(chuàng)建應(yīng)用外殼

使用 CLI 自動(dòng)創(chuàng)建一個(gè)應(yīng)用外殼。

ng generate app-shell

執(zhí)行完這個(gè)命令，你會(huì)發(fā)現(xiàn) ?angular.json? 配置文件中已經(jīng)增加了兩個(gè)新目標(biāo)，并做了一些其它更改。

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "defaultConfiguration": "production",
  "options": {
    "outputPath": "dist/my-app/server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json"
  },
  "configurations": {
    "development": {
      "outputHashing": "none",
    },
    "production": {
      "outputHashing": "media",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "sourceMap": false,
      "optimization": true
    }
  }
},
"app-shell": {
  "builder": "@angular-devkit/build-angular:app-shell",
  "defaultConfiguration": "production",
  "options": {
    "route": "shell"
  },
  "configurations": {
    "development": {
      "browserTarget": "my-app:build:development",
      "serverTarget": "my-app:server:development",
    },
    "production": {
      "browserTarget": "my-app:build:production",
      "serverTarget": "my-app:server:production"
    }
  }
}

第 3 步：驗(yàn)證該應(yīng)用是使用應(yīng)用外殼的內(nèi)容構(gòu)建的

使用 CLI 構(gòu)建目標(biāo) ?app-shell?。

ng run my-app:app-shell:development

或使用產(chǎn)品環(huán)境配置。

ng run my-app:app-shell:production

要驗(yàn)證構(gòu)建輸出，請(qǐng)打開 ?dist/my-app/browser/index.html?。尋找默認(rèn)的文本 ?app-shell works!? 就可以驗(yàn)證這個(gè)應(yīng)用外殼路由確實(shí)是作為輸出的一部分渲染出來(lái)的。