angularlocalization

Correct way to use Angular localize subpath


I'm developing a website using Angular 19.2 that switches between Japanese (default language) and English. I want to display Japanese by default. After signing in, I want to be able to select English from a dropdown to display the English version.

I run ng build --configuration=production --localize and deploy the built output to Microsoft Azure App Service.

According to information online,

"i18n": {
  "sourceLocale": "ja",
  "locales": {
    "en": {
      "subPath": "en-us",
      "translation": "src/locale/messages.en-US.json"
    }
  }
}

after making the aforementioned configurations in angular.json, the expected file structure after building should have the Japanese version in the root, and an "en-us" folder containing the English version. However, despite various attempts, this isn't happening, and instead, a "ja" folder is being created:

dist

├── ja/

│ └── index.html

│ └── other files

├── en-us/

│ └── index.html

│ └── other files

First, I'd like to resolve this file structure issue. Thank you.


Solution

  • Try setting "subPath": "" to the locale that you want to run on root:

    "i18n": {
      "sourceLocale": {
        "code": "ja",
        "subPath": ""
      },
      "locales": {
        "en": {
          "subPath": "en-us",
          "translation": "src/locale/messages.en-US.json"
        }
      }
    }