如何在开发过程中使用ng-server为不同的Angular区域设置提供服务

Question

我正在使用Angular国际化(i18n)用两种不同的语言(fa/en)开发一个应用程序。

• 目标是将两个不同的构建部署到服务器上的子文件夹中(例如.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-server)只能与单个区域设置一起使用。

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

ng serve --configuration=fa --port 4200

ng serve --configuration=en --port 4201

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

Answer 2

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

是的，我知道这并不能解决这个问题，但这个帖子出现在谷歌的最顶端。