Angular 服务器端渲染 - 向 angular.json 添加什么？答案

【问题标题】：Angular Server Side Rendering - What to add to angular.json?Angular 服务器端渲染 - 向 angular.json 添加什么？
【发布时间】：2020-02-13 09:49:04
【问题描述】：

我正在关注Firebase's Tutorial for SSR with Angular。不幸的是，教程已经过时了，因为 Angular 6 angular-cli.json 被 angular.json 取代。如何将步骤翻译成angular.json 文件？

为了比较，这是我的文件的样子：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "norebro": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/norebro",
            "index": "src/index.html",
            "main": "src/main.ts",
            ...

【问题讨论】：

对于 Angular 8，您可以查看说明 here（顺便说一句，使用 Angular 8 设置 SSR 更简单）... 至于 Angular 6，您可以找到官方文档 here，你拥有在那里设置 SSR 所需的一切......
@miselking 谢谢，我正在使用 Angular 8。您是否知道任何教程如何将 Angular 8 SSR 与 Firebase 一起使用？我对这个话题很陌生。
我知道您无法将 Angular Universal 应用程序部署到静态主机（即 Firebase Hosting、AWS S3...）。但是，您可以使用Firebase Cloud Functions。虽然我没有测试它，但我用这种方法添加了一个答案......希望它会起作用......

标签： html json angular firebase

【解决方案1】：

您应该立即在build（但不在里面）下添加服务器应用程序的配置。它看起来像这样：

"server": {
                "builder": "@angular-devkit/build-angular:server",
                "options": {
                    "outputPath": "dist/server",
                    "main": "src/main.server.ts",
                    "tsConfig": "src/tsconfig.server.json",
                    "stylePreprocessorOptions": {
                        "includePaths": [
                            "src/styles"
                        ]
                    }
                },
                "configurations": {
                    "production": {
                        "fileReplacements": [
                            {
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }
                        ],
                        "outputHashing": "media"
                    },
                    "dev": {
                        "fileReplacements": [
                            {
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.dev.ts"
                            }
                        ]
                    }
                }
            },

注意这个有一些不相关的属性，比如stylePreprocessorOptions。让我们关注那些相关的，它们是 builder、outputPath、main 和 tsConfig。这些文件可能会在服务器端呈现的应用程序和客户端呈现的应用程序之间发生变化。

【讨论】：

github.com/angular/angularfire/blob/master/docs/deploy/…

【解决方案2】：

在使用 Angular Universal 构建项目时，我也为学习许多教程而苦苦挣扎，AngularFire2 的 documentation 非常简单。

【讨论】：

【解决方案3】：

要回答您的问题，由于您使用的是 Angular 8，您可以运行此命令以使您的项目使用 SSR：

ng add @nguniversal/express-engine --clientProject norebro

运行此命令后，您应该通过 Angular 为您正确设置所有内容。要检查一切是否正常，首先构建您的项目：

npm run build:ssr

然后服务它（并检查一切是否正常）：

npm run serve:ssr

具体来说，angular.json里面需要修改的东西是：

在“projects”->“norebro”（your_project_name）->“architect”->“build”->“options”部分修改outputPath，如下所示：

    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/browser",

然后在“架构师”部分中，添加一个新的server 部分，如下所示：

    "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": {
            "scripts": false,
            "styles": true
          }
        }
      }
    }

关于向 Firebase 发布 Angular SSR 应用程序，请查看this 答案。

关键是我们无法使用 Firebase Hosting 部署 Angular SSR 应用程序，但我们可以使用 Firebase Cloud Functions 来部署。

P.S：最初，答案是在这里发布的，但用户在查询时可能在此处找不到 Firebase 部署的答案（因为 OP 不是关于部署到 Firebase 的）。这就是为什么我创建了一个单独的问答来解决这个问题。

希望这会有所帮助...

【讨论】：