Missing locale data for the locale "XXX" with angular

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)

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