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?

Answer 1

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)