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.

score 30 · Answer 1 · answered Apr 09 '20 at 13:49

30

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

answered Apr 09 '20 at 13:49

Csaba

1,945
3
28
46

Yes, that's what I'm currently doing as stated in my question on the last paragraph. Hopefully they will fix this soon enough. – azerafati Apr 09 '20 at 13:51
14

its angular 12 still no fix :D – Dživo Jelić Oct 04 '21 at 17:04
They should support it show more people will use native way instead of 3rd party. – hoangmeo325 Mar 09 '22 at 04:23
Aside from running `ng serve` for each language (each on different port), you can also set up http proxy for each locale, so that all language versions are accessible on a single localhost port. – xemlock May 05 '22 at 07:26
Angular is @ v16, and still no fix! This is a good day wasted on this. :"( – Achilles Jun 24 '23 at 17:22

score 3 · Answer 2 · answered Sep 28 '22 at 18:42

If you just want to quickly validate the localization for a specific language, like me, just add "localize": ["<YOUR-LOCALE>"] to the angular.json in "projects" > "<YOUR PROJECT NAME>" > "architect" > "build" > "configurations" > "development". After that, the normal ng serve command uses the specified localization. Once you're done, don't forget to remove it again ;)

And yes, I'm aware that this doesn't address the question, but this thread shows up at the very top in google.

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

2 Answers2

Linked