CODEWITHSUNDEEP
angularinternationalizationlocaleangular8
Rabie Daddi
Rabie Daddi

Reputation: 184

Change default Locale in angular

I built an angular app in french, so now i want to use internationalization (i18n) to provide it in other languages like En, so the problem is the default locale for Angular is en-US and when i write this <span i18n>Mes endroits</span>,I have this

<file source-language= "en-US" datatype="plaintext" original="ng2.template">// source is English
    <body>
      <trans-unit id="4df6e2173dc9d9f8c60481273cf3371981e60fde" datatype="html">
        <source>Mes endroits</source> ... // but this is in french

and i want the source language to be fr and provide for example messages.en.xlf

so can I change the default locale to fr , or I have to rewrite my code in English and provide messages.fr.xlf

Upvotes: 7

Views: 20052

Answers (3)

Marcus Riemer
Marcus Riemer

Reputation: 7688

This should be possible by setting the sourceLocale in the angular.json file. In my case the core application is german, so the relevant part of the file reads as follows:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-client": {
      "i18n": {
        "sourceLocale": {
          "code": "de",
          "baseHref": ""
        },
        "locales": {
          "en": {
            "translation": "src/locale/messages.en.xlf",
            "baseHref": ""
          }
        }
      }
    }
  }
}

For me this works just as expected, the XLF files are all attributed correctly.

Upvotes: 8

Gourav Garg
Gourav Garg

Reputation: 2911

Here is the documentation provided by angular.

Stackblitz link

In app.module.ts add this in providers:

{ provide: LOCALE_ID, useValue: 'de-DE'}

Upvotes: 3

Gwenael C
Gwenael C

Reputation: 116

This could help you ngx-translate/ng2-translate, this library is very common in angular projects.

Personaly I prefer to do translation this way.

You will be able to use the translate pipe. like this

<p>{{ 'myPlaces' | translate }}</p>

And in a fr.json define : 

{ 'myPlaces' : 'Mes endroits' }

I let you check the documentation

Upvotes: 2

Related Questions