應用外殼link

App shelllink

應用外殼是一種在建構期間藉助路由渲染部分應用的方法。它可以透過快速啟動一個靜態渲染頁面（所有頁面的公共骨架）來改善使用者體驗。與此同時，瀏覽器會下載完整的客戶端版本，並在程式碼載入後自動切換到完整版。

App shell is a way to render a portion of your application via 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 simply render the HTML and CSS without the need to initialize any JavaScript.

欲知詳情，參閱應用外殼模型。

Learn more in The App Shell Model.

第 1 步：準備本應用link

Step 1: Prepare the applicationlink

可以用下列 CLI 命令來執行本操作：

You can do this with the following CLI command:

      
        content_copy
      
      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 步：建立應用外殼link

Step 2: Create the app shelllink

使用 CLI 自動建立一個應用外殼。

Use the CLI to automatically create the app shell.

      
        content_copy
      
      ng generate app-shell
    

• client-project 是你這個客戶端應用的名字。

  client-project takes the name of your client application.

執行完這個命令，你會發現 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.

      
        content_copy
      
      "server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/my-app-server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json"
  }
},
"app-shell": {
  "builder": "@angular-devkit/build-angular:app-shell",
  "options": {
    "browserTarget": "my-app:build",
    "serverTarget": "my-app:server",
    "route": "shell"
  },
  "configurations": {
    "production": {
      "browserTarget": "my-app:build:production",
      "serverTarget": "my-app:server:production"
    }
  }
}
    

第 3 步：驗證該應用是使用應用外殼的內容建構的link

Step 3: Verify the app is built with the shell contentlink

使用 CLI 建構目標 app-shell。

Use the CLI to build the app-shell target.

      
        content_copy
      
      ng run my-app:app-shell
    

或使用產品環境配置。

Or to use the production configuration.

      
        content_copy
      
      ng run my-app:app-shell:production
    

要驗證建構的輸出，請開啟 dist/my-app/index.html。尋找預設的文字 app-shell works! 就可以驗證這個應用外殼路由確實是作為輸出的一部分渲染出來的。

To verify the build output, open dist/my-app/index.html. Look for default text app-shell works! to show that the app shell route was rendered as part of the output.