如何在开发过程中使用 ng serve 服务不同的 Angular 语言环境？

Question

我正在使用Angular Internationalization (i18n)以两种不同的语言 (fa/en) 开发应用程序。

• 目标是将两个不同的构建部署到服务器上的子文件夹中 (example.com/en/...)
• 这些构建不仅在翻译上不同，而且样式和布局方向也不同。

我可以提供任何这样的本地化（语言）

  "architect": {
    "build": {
      ...
      ,
      "configurations": {
      ...
        },
        "fa": {
          "localize": ["fa"],
          "baseHref": "/fa/"
        },
        "en": {
          "localize": ["en"],
          "baseHref": "/en/"
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "app:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "app:build:production"
        },
        "en": {
          "browserTarget": "app:build:en"
        },
        "fa": {
          "browserTarget": "app:build:fa"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "app:build"
      }
    },
    ...
  }

然后ng serve --configuration=en工作，我有它http://localhost:4200/en/...但我需要在开发过程中同时提供两种语言以处理样式和正确的布局并检查翻译。如果我尝试在构建配置中执行此操作，"localize": ["fa","en"]则会出现以下错误。

An unhandled exception occurred: The development server only supports localizing a single locale per build

到目前为止，我得到的最好的方法是ng serve ..在不同的端口上多次运行，以便在不同的语言环境中拥有两个开发服务器实例，但这有点难看。我希望有更好的解决方案。

Answer 1

在 Angular 9 中，开发服务器 (ng serve) 只能用于单个语言环境。

但是，您仍然可以通过运行两个单独的命令在不同的端口上为每个语言环境提供服务：

ng serve --configuration=fa --port 4200

ng serve --configuration=en --port 4201

希望他们能在 Angular 10 中为开发构建引入多种语言环境选项

Answer 2

如果您只是想快速验证特定语言的本地化，就像我一样，只需添加"localize": ["<YOUR-LOCALE>"]到angular.jsonin "projects" > "<YOUR PROJECT NAME>" > "architect" > "build" > "configurations" > "development". 之后，普通ng serve命令将使用指定的本地化。完成后，不要忘记再次将其删除；）

是的，我知道这并没有解决这个问题，但是这个线程显示在谷歌的最顶部。