How to serve different Angular locales during development using ng serve?

橙三吉。 提交于 2020-07-18 22:09:23

问题


I'm developing an app in two different languages (fa/en) using Angular Internationalization (i18n).

  • The target is to deploy the two different builds into sub-folders on the server (example.com/en/...)
  • These builds are different not only in translation but also styles and layout directions are different.

I can serve any of the localization (languages) like this

  "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"
      }
    },
    ...
  }

And then ng serve --configuration=en works and I have it on http://localhost:4200/en/... But I need to serve both languages simultaneously during development to work on the styles and the correct layout and check the translations. If I try to do this in the build configuration "localize": ["fa","en"] I get the following error.

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

The best I got so far is to run ng serve .. multiple times on different ports to have two instances of the development server in different locales but that is kinda ugly. I am hoping for a better solution.


回答1:


In Angular 9 the development server (ng serve) can only be used with a single locale.

However, you can still serve each locale on different ports by running two separate commands:

ng serve --configuration=fa --port 4200

ng serve --configuration=en --port 4201

Hopefully, they will introduce multiple locale options for development builds in Angular 10 🤞



来源:https://stackoverflow.com/questions/60683954/how-to-serve-different-angular-locales-during-development-using-ng-serve

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!