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

Question

我正在使用 Angular 关注 Firebase 的 SSR 教程。 不幸的是，教程已经过时了，因为 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",
            ...

Answer 1

要回答您的问题，由于您使用的是 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
          }
        }
      }
    }

---

至于将 Angular SSR 应用程序发布到 Firebase，请查看此答案。

关键是我们无法使用 Firebase 托管部署 Angular SSR 应用程序，但我们可以通过使用Firebase Cloud Functions来实现。

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

希望这可以帮助...

Answer 2

立即在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 。 这些文件可能会在服务器端呈现的应用程序和客户端呈现的应用程序之间发生变化。

Answer 3

在使用 Angular Universal 构建项目时，我也遇到了许多教程，AngularFire2 的文档非常简单。