Missing locale data for the locale "XXX" with angular

Question

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?

Ah! Thanks a lot, I saw that post but I missed the "i18n pipes" section. These articles are way too long. Thanks a lot, it works now ;-) — ssougnez, Sep 26 '17 at 06:27

score 169 · Accepted Answer · edited Jul 04 '19 at 21:25

169

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)

edited Jul 04 '19 at 21:25

S. Pellegrino

648
3
11

answered Feb 18 '18 at 06:59

Alan

9,167
4
52
70

2

finally found the way to do so . Thanks – sandyiit Mar 28 '19 at 04:40
6

The `registerLocaleData(localeFr);` call is a pure side effect and will be stripped by tree shaking; In other words, if you enable tree-shaking with `"sideEffects": false` then this works in dev and fails in prod. Better to put it the function call into the AppModule constructor. – vbraun Jan 04 '21 at 18:32
2

I had the same issue with this error message: Missing locale data for the locale "hu".' for pipe 'DatePipe'. This solved. Thanks! – Kristóf Dombi Jan 18 '21 at 12:34

score 45 · Answer 2 · answered Mar 30 '19 at 16:52

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 {}

Missing locale data for the locale "XXX" with angular

2 Answers2

Linked