Change default Locale in angular

S

3

7

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

Sizable answered 3/4, 2020 at 11:34 Comment(0)

S

2

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

Selfindulgent answered 3/4, 2020 at 11:43 Comment(0)

M

7

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.

Moluccas answered 27/10, 2020 at 13:14 Comment(0)

E

3

Here is the documentation provided by angular.

Stackblitz link

In app.module.ts add this in providers:

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

Evanne answered 3/4, 2020 at 11:54 Comment(2)

I tried that it only provide fr locale but don't change the default one – Sizable 3/4, 2020 at 12:36

Also you can try with { provide: LOCALE_ID, useValue: 'de-DE'} in app.module.ts – Evanne 3/4, 2020 at 15:9

S

2