Angular 预渲染国际化混淆

Question

我们严重依赖 angular i18n 进行本地化。通常我们会使用 command

为 locale 创建一个文件夹

ng build some-project --localize

这将创建 /dist/some-project/en/ 和 /dist/some-project/de/

npm 运行 prerender 在 /dist/some-project/browser/ 中只输出一个，同时忽略 --localize 标志。我的问题是：预渲染选项是否仍处于某种测试阶段？我们现在应该避免使用它，还是我在这里遗漏了什么？

我的理解是我必须为每个语言环境创建单独的静态页面。

这是我的 angular.json

"prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "offer:build:prod",
        "serverTarget": "offer:server:prod",
        "routes": [
          "/"
        ]
      },
      "configurations": {
        "prod": {}
      }
    }

Answer 1

我认为这根本没有记录。我花了几天 googling/try-failing 才在发布问题后几分钟找到答案。

npm run prerender

执行：

 "prerender": {
      "builder": "@nguniversal/builders:prerender",
      "options": {
        "browserTarget": "offer:build:prod",
        "serverTarget": "offer:server:prod",
        "routes": [
          "/"
        ]
      },
      "configurations": {
        "prod": {}
      }
    }

我需要将 "localize": ["en", "de"] 选项添加到 server 和 browser 构建配置
服务器：

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/offer/server",
            "main": "projects/offer/server.ts",
            "tsConfig": "projects/offer/tsconfig.server.json",
            "localize": ["en", "de"]
          },
          "configurations": {
            "prod": {
              "sourceMap": false,
              "optimization": true
            }
          }
        }

客户：

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/offer/browser",
            "index": "projects/offer/src/index.html",
            "main": "projects/offer/src/main.ts",
            "polyfills": "projects/offer/src/polyfills.ts",
            "tsConfig": "projects/offer/tsconfig.app.json",
            "localize": ["en", "de"],
            "aot": true,
            "extractCss": true,
            "preserveSymlinks": true,
            "stylePreprocessorOptions": {
              "includePaths": [
                "projects/offer/src"
              ]
            }... etc

Angular 预渲染国际化混淆

Angular prerender i18n confusion

server-side-rendering

angular-universal

angular