举报投诉联系我们 手机版 热门标签 名动网
您的位置:名动网 > angular应用程序开发指南 Angular 应用外壳

angular应用程序开发指南 Angular 应用外壳

2023-05-23 21:20 Angular13

angular应用程序开发指南 Angular 应用外壳

angular应用程序开发指南 Angular 应用外壳

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应用程序开发指南 Angular 应用外壳全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 名动网 mdwl.vip 版权所有 联系我们