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

Question

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.

Answer 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 🤞