Prevent Angular from updating base href with langcode

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

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/messagesfr.xlf"
        }
    }
}

Prevent Angular from updating base href with langcode, Prevent Angular from updating base href with langcode. 发布于 2020-04-23 16: 43:37. I have problem with angular v9. I have implemented i18n localization� This article has been updated to the latest version Angular 10 and tested with Angular 9. The content is likely still applicable for all Angular 2 + versions. When building large enterprise Angular applications, there are times where the user may need to leave the application temporarily to complete some task. Often when we provide a link to a separate domain, we can apply a particular

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 :)

Base href overridden by locale config � Issue #17260 � angular , Is there any way to avoid adding base tag during the build, but still build localized floreks changed the title Base href overriden by locale config Base href overridden by locale Update docs for i18n angular/angular#35776. This means that a query in the <base href> is only included when using HashLocationStrategy. If a link in the page is a root URL (has an authority), the <base href> is not used. In this way, an APP_BASE_HREF with an authority will cause all links created by Angular to ignore the <base href> value. A fragment in the <base href> is never persisted.

You can override baseHref with this:

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

URLs not prefixed with base href after update to Angular 8, breaks , URLs not prefixed with base href after update to Angular 8, breaks i18n recommended to avoid use of any URL modifying application options� During navigation, the Angular router uses the base href as the base path to component, template, and module files. See also the APP_BASE_HREF alternative. In development, you typically start the server in the folder that holds index.html .

How to implement localization in Angular using i18n tools, In this article, we will learn how to make our Angular app available in <ng- container *ngFor="let language of languageList"> <a href="/{{language.code}}/"> <button will provide by changing the i18n file path and baseHref attribute values. How to avoid null check pollution in JavaScript: use Optionals. @mattdistefano is right. the cli's dev server does this automatically. Angular's router uses the history api by default. when you use routerLink to change the route state it works fine because it is updating via this api.

APP_BASE_HREF, The base href is the URL prefix that should be preserved when generating and how to use this token to configure the root app injector with a base href value,� Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.

The HTML base HREF is intended to be a runtime value used by the web browser and not a build time constant. The rebaseRootRelativeCssUrls browser builder option can be used to maintain existing behavior for 8.x.

Comments
  • ..marking my own response, as there are no better answers :(