首页 > 解决方案 > 如何使用 Angular 6 和 AngularFire2 实现 SSR

问题描述

我正在按照本教程使用 AngularFire2 设置 SSR。然而,本指南似乎“仅符合 Angular 5”——带有 angularfire2 的 SSR

我的问题是:当我进入需要设置 angular-cli.json(现在在 Angular 6 中称为 angular.json)的步骤时,结构被完全重写。正如教程所建议的那样,有没有办法添加多个构建目标?

我已经尝试为架构师构建部分添加一个数组条目(有点像在 angular-cli.json 中添加应用程序数组的“旧”方式),但没有运气 - 我得到“这里预期的对象” - 它看起来像这样:

    "build": [{
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/browser",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss",
          "src/assets/foundation-icons/foundation-icons.css"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
      }, ... // new build target here ]

有没有办法用angular 6的新json结构达到同样的效果,这里我只说设置angular.json的配置信息?

如果需要,我可以提供更多信息。

亲切的问候克里斯。

标签: angularconfigurationangularfire2server-side-rendering

解决方案


在架构师配置下,您可以添加服务器端应用程序的配置,类似于您在 .angular-cli.json 中配置应用程序的方式。

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

请注意,这不在build 属性下。然后将此代码构建到 dist-server,您可以运行

ng run myProject:server

这是安装新 CLI 后运行 ng upgrade 提供的默认配置,但弄清楚 ng run 命令需要大量试验和错误。:)


推荐阅读