Angular CLI 6.0.0 RC为Universal + App Shell提供了一个选项

1 年 ago

新, 韵

2 minutes

不久后，即将推出最新版本的Angular CLI 6.0.0！

本文介绍了如何在目前的Angular CLI 6.0.0的RC版中集成Universal（服务器端渲染）和App Shell的步骤。

※在6.0.0版本发布后，操作可能会有所不同。

创建项目

请先安装Angular CLI 6.0.0 RC。

$ npm i -g @angular/cli@next

我要创建一个新项目。

$ ng new my-app --routing
$ cd my-app

将Universal集成

我将创建一个适用于Universal的文件套件。

$ ng g universal --client-project=my-app

我们执行npm install来更新依赖关系。

$ npm i

目前，已经修正了angular.json的路径设置，因为原来的设置错误。

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/my-app-server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  }
}

我认为，此后会有修正。（https://github.com/angular/angular-cli/issues/10288）

由于tsconfig.server.json的位置不好，所以将其移动。
※目前已被修正。

$ mv tsconfig.server.json src/tsconfig.server.json

由于移动，需要修正entryModule的路径。
※目前已经修正完毕。

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app-server",
    "module": "commonjs"
  },
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

将App Shell集成进去。

创建应用壳。

$ ng g app-shell --client-project=my-app --universal-project=my-app

我会修改设置以进行生产构建。

"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"
    }
  }
}

应用程序的构建

用 ng run 进行构建。

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

我们来用浏览器确认一下。

$ npx http-server ./dist/my-app

当你启动服务器并打开http://localhost:8080，即可查看已构建的应用程序。

最后

我已经成功在RC版的Angular CLI中添加了App Shell。
手动修复非常麻烦呢！
在2018/05/06的v6.0.0中修复了Universal的错误，太好了！

由于Angular CLI 6.0.0仍在开发中，所以在命令方面可能会遇到一些困难，特别是在与1.7系列有所改变的部分。建议您可以使用–help选项来确认，或者参考angular/angular-cli和angular/devkit的文档或问题来解决问题。

请参考这个。

https://next.angular.io/guide/universal
https://github.com/puku0x/angular-pwa-sample/tree/next