如何在使用ng serve开发过程中为不同的Angular本地化服务？

Question

我正在使用Angular国际化（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 ..，以在不同的语言环境下拥有两个开发服务器实例，但这有点丑陋。我希望有一个更好的解决方案。

- azerafati

Answer 1

在Angular 9中，开发服务器（ng serve）只能与单个语言环境一起使用。

不过，你仍然可以通过运行两个独立的命令，在不同的端口上为每个语言环境提供服务： ng serve --configuration=fa --port 4200 ng serve --configuration=en --port 4201 希望在Angular 10中，他们会引入多语言环境选项来进行开发构建。

- Csaba

---

是的，正如我在上一段问题中所述，这就是我目前正在做的。希望他们很快修复这个问题。 - azerafati

它的Angular 12仍然没有修复:D。 - Dživo Jelić

他们应该支持本地方式，这样更多的人会使用本地方式而不是第三方。 - hoangmeo325

除了为每种语言（在不同的端口上）运行 ng serve 之外，您还可以为每个区域设置 http 代理，以便所有语言版本都可以在单个本地主机端口上访问。 - xemlock

Angular是@ v16，仍然没有修复！这是浪费在这上面的好一天。:"( - Achilles

Answer 2

如果您只想快速验证特定语言的本地化，可以像我一样，在angular.json中添加"localize": ["<YOUR-LOCALE>"]到"projects" > "<YOUR PROJECT NAME>" > "architect" > "build" > "configurations" > "development"。之后，正常的ng serve命令将使用指定的本地化。完成后，请不要忘记再次删除它 ;)

是的，我知道这并没有回答问题，但是这个线程在谷歌上排名非常靠前。

- Elias