codecamp

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!​ 就可以验证这个应用外壳路由确实是作为输出的一部分渲染出来的。


Angular Service Worker和PWA-入门
Angular Service Worker通信
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Angular 开发指南

Angular 特性预览

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }