應用外殼
App shell
應用外殼是一種在建構期間藉助路由渲染部分應用的方法。它可以透過快速啟動一個靜態渲染頁面（所有頁面的公共骨架）來改善使用者體驗。與此同時，瀏覽器會下載完整的客戶端版本，並在程式碼載入後自動切換到完整版。
Application shell is a way to render a portion of your application using a route at build time. It can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads.
這能讓使用者快速看到應用中第一個有意義的畫面，因為瀏覽器可以渲染出 HTML 和 CSS，而無需初始化任何 JavaScript。
This gives users a meaningful first paint of your application that appears quickly because the browser can render the HTML and CSS without the need to initialize any JavaScript.
欲知詳情，參閱應用外殼模型。
Learn more in The App Shell Model.
第 1 步：準備本應用
Step 1: Prepare the application
可以用下列 CLI 命令來執行本操作：
You can do this with the following CLI command:
ng new my-app --routing
對於既有應用，你必須手動新增 RouterModule 並在應用中定義 <router-outlet>。
For an existing application, you have to manually add the RouterModule and defining a <router-outlet> within your application.
第 2 步：建立應用外殼
Step 2: Create the app shell
使用 CLI 自動建立一個應用外殼。
Use the CLI to automatically create the application shell.
ng generate app-shell
client-project 是你這個客戶端應用的名字。
For more information about this command see App shell command.
執行完這個命令，你會發現 angular.json 配置檔案中已經增加了兩個新目標，並做了一些其它更改。
After running this command you will notice that the angular.json configuration file has been updated to add two new targets, with a few other changes.
"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 步：驗證該應用是使用應用外殼的內容建構的
Step 3: Verify the app is built with the shell content
使用 CLI 建構目標 app-shell。
Use the CLI to build the app-shell target.
ng run my-app:app-shell:development
或使用產品環境配置。
Or to use the production configuration.
ng run my-app:app-shell:production
要驗證建構的輸出，請開啟 dist/my-app/browser/index.html。尋找預設的文字 app-shell works! 就可以驗證這個應用外殼路由確實是作為輸出的一部分渲染出來的。
To verify the build output, open dist/my-app/browser/index.html. Look for default text app-shell works! to show that the application shell route was rendered as part of the output.
