Angular 应用外壳

应用外壳

应用外壳是一种在构建期间借助路由渲染部分应用的方法。它可以通过快速启动一个静态渲染页面（所有页面的公共骨架）来改善用户体验。与此同时，浏览器会下载完整的客户端版本，并在代码加载后自动切换到完整版。

这能让用户快速看到应用中第一个有意义的画面，因为浏览器可以渲染出 HTML 和 CSS，而无需初始化任何 JavaScript。

欲知详情，参阅应用外壳模型。

第 1 步：准备本应用

可以用下列 CLI 命令来执行本操作：

ng new my-app --routing

对于既有应用，你必须手动添加 ​RouterModule ​并在应用中定义 ​<router-outlet>​。

第 2 步：创建应用外壳

使用 CLI 自动创建一个应用外壳。

ng generate app-shell

执行完这个命令，你会发现 ​angular.json​ 配置文件中已经增加了两个新目标，并做了一些其它更改。

"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 步：验证该应用是使用应用外壳的内容构建的

使用 CLI 构建目标 ​app-shell​。

ng run my-app:app-shell:development

或使用产品环境配置。

ng run my-app:app-shell:production

要验证构建输出，请打开 ​dist/my-app/browser/index.html​。寻找默认的文本 ​app-shell works!​ 就可以验证这个应用外壳路由确实是作为输出的一部分渲染出来的。