Prevent Angular from updating base href with langcode

Question

I have problem with angular v9. I have implemented i18n localization features into my app. When I try to build my application with certain location it constantly adds the sub-folder to the base href path (but I want to keep files in the sub-folder). Is there any way to prevent adding the locale into the base href url?

Reproduction steps:

1. Generate dummy project ng new Project.
2. Build production config ng build --prod --localize.
3. Files are built into dist/en-us/ folder, but the index.html has <base href="/en-US/">.

Is there any way to force angular to stop adding the langcode into base href? This inflicts all the app links to contain language code, which is unwanted.

My deployment is configured to deploy the application based on the directory into different location which every will be at root.

• hxxp://app.fr/ root in /fr/ folder
• hxxp://app.de/ root in /de/ folder

Exogenous

Answer 1

I had the same problem and found the solution in this issue:

https://github.com/angular/angular-cli/issues/17260

You have to write for each locales and for your sourceLocale the baseHref

"i18n": {
    "sourceLocale": {
        "code": "en",
        "baseHref": ""
    },
    "locales": {
        "fr": {
            "baseHref": "",
            "translation": "src/locale/messages.fr.xlf"
        }
    }
}

Hedger

Answer 2

Posting with my solution, but that kills the new feature of Angular v.9.

The solution is to not use --localize flag.

So I removed definition:

"i18n": {
    "sourceLocale": "de",
    "locales": {
      "fr": "src/app/locale/messages.fr.xlf",
}

Then I created custom configuration under:

  "configurations": {
    "fr": {
      "i18nFile": "src/app/locale/messages.fr.xlf",
      "i18nLocale": "fr",
      "outputPath": "dist/fr"
    }

And just called:

ng build --configuration=fr

But that is ugly.. so waiting for some better ideas :)

Exogenous

..marking my own response, as there are no better answers :( – Exogenous

Answer 3

You can override baseHref with this:

"locales": {
  "de": {
    "translation": "src/locale/messages.de.xlf",
    "baseHref": "/"
  },
....
}

Emmi

Answer 4

in Dockerfile:

RUN sed -i "s/<base.*//" /usr/share/nginx/html/nl/index.html

Badderlocks

Answer 5

You can stop to generate locales in your dist while build the project. For Ex.: /dist/project_name/en_us/. Remove below line from angular.json file.

"localize": true,
"i18nMissingTranslation": "error",

Gibb