CODEWITHSUNDEEP
angularangular-i18n
ssougnez
ssougnez

Reputation: 5886

Missing locale data for the locale "XXX" with angular

I currently define "LOCALE_ID" on "en-US" this way:

@NgModule({
    providers: [{ provide: LOCALE_ID, useValue: "en-US" }, ...],
    imports: [...],
    bootstrap: [...]
})

and it works pretty well. However, in order to test how dates look like in French, I replaced "en-US" by "fr-FR" and then I got the error:

Missing locale data for the locale "fr-FR".

I did some researches and I didn't find anything related to that. Are the locale for french included in the default package? Is it a different package? Do I have to create them by myself?

Upvotes: 103

Views: 117272

Answers (4)

Mehdi Benmoha
Mehdi Benmoha

Reputation: 3945

In recent Angular versions, if you are using a single locale, you can just add it in your angular.json file under the project configuration like this:

"projects": {
  "disruptive-project": {
    "i18n": {
      "sourceLocale": "fr-FR"
    }
  }
}

Upvotes: 3

Mo D Genesis
Mo D Genesis

Reputation: 6179

also check in your message.json or any other file if your locale is correct:

enter image description here

Upvotes: 0

Alan
Alan

Reputation: 10183

In file app.module.ts

...
import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);


@NgModule({
  imports: [...],
  declarations: [...],
  bootstrap: [...],
  providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR'},
  ]
})
export class AppModule {}

(source: https://next.angular.io/guide/i18n)

and in your template (*.component.html)

DATE in FRENCH: {{ dateEvent | date: 'longDate'}}

Result:

DATE in FRENCH: 25 mars 2018

(source: https://angular.io/api/common/DatePipe)

Upvotes: 193

Adrien V
Adrien V

Reputation: 633

Thanks @Alan, you just forgot this : import { registerLocaleData } from '@angular/common';

Complete code :

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

@NgModule({
  imports: [...],
  declarations: [...],
  bootstrap: [...],
  providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR'},
  ]
})
export class AppModule {}

Upvotes: 51

Related Questions