Angular 6 + AngularFire2 SSR实现：angular.json多构建目标配置问题

嘿，我刚好踩过Angular 6+配置AngularFire2 SSR的坑，针对你说的多构建目标需求，完全可以实现，只是和Angular 5的旧配置逻辑不一样了，给你捋清楚怎么弄：

首先得明确，Angular 6+的angular.json和旧版angular-cli.json结构差异很大——原来的多应用/多构建目标是用数组，现在每个项目的architect节点下，是键值对形式来定义不同的构建/运行目标，而不是把多个配置塞到build数组里。

正确的多构建目标配置方式 #

你需要在项目的architect下，新增一个专门用于服务端渲染的构建目标（比如叫server），和默认的build（浏览器端构建）平级。举个完整的示例片段：

"projects": {
  "your-project-name": {
    // ... 其他项目配置
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/browser",
          "main": "src/main.ts",
          "tsConfig": "src/tsconfig.app.json"
          // ... 其他浏览器构建配置
        },
        "configurations": {
          "production": {
            // ... 生产环境浏览器配置
          }
        }
      },
      // 新增的服务端构建目标
      "server": {
        "builder": "@angular-devkit/build-angular:server",
        "options": {
          "outputPath": "dist/server",
          "main": "src/main.server.ts",
          "tsConfig": "src/tsconfig.server.json"
        },
        "configurations": {
          "production": {
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
            ],
            "sourceMap": false,
            "optimization": true
          }
        }
      },
      // 可选：新增SSR开发服务启动目标
      "serve-ssr": {
        "builder": "@nguniversal/builders:ssr-dev-server",
        "options": {
          "browserTarget": "your-project-name:build",
          "serverTarget": "your-project-name:server"
        },
        "configurations": {
          "production": {
            "browserTarget": "your-project-name:build:production",
            "serverTarget": "your-project-name:server:production"
          }
        }
      }
    }
  }
}

配置后怎么用？ #

你可以通过命令直接调用对应的构建目标，也可以在package.json里封装成脚本更方便：

• 构建生产环境的浏览器+服务端bundle：

  npm run build:ssr
  

  对应的package.json脚本：

  "scripts": {
    "build:ssr": "ng build --prod && ng run your-project-name:server:production",
    "serve:ssr": "node dist/server/main.js"
  }
  

• 启动SSR开发服务：

  ng run your-project-name:serve-ssr
  

额外的AngularFire2 SSR注意点 #

别忘了在服务端模块（app.server.module.ts）里正确初始化AngularFire，并且要避免在服务端执行浏览器特有的API（比如window、document），可以用PLATFORM_ID来判断环境：

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

// 在组件/服务里注入判断
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  if (isPlatformBrowser(this.platformId)) {
    // 浏览器环境下执行的逻辑
  }
}

内容的提问来源于stack exchange，提问作者ChrisEenberg