Missing locale data for the locale "ru" Angular 5

Question

I updated Angular to version 5 and get this error

It seems to me the error with pipe in this line

<h5>{{ event.date | date:"yyyy.MM.dd"}}</h5>.

Anybody knows how to fix this?

Answer 1

It seems you don't update your pipe since breacking change of angular 5 see: https://github.com/angular/angular/blob/master/CHANGELOG.md

• by default Angular now only contains locale data for the language en-US, if you set the value of LOCALE_ID to another locale, you will have to import new locale data for this language because we don't use the intl API anymore.
• all i18n pipes now have an additional last parameter locale which allows you to use a specific locale instead of the one defined in the token LOCALE_ID (whose default value is en-US).

• the predefined formats (short, shortTime, shortDate, medium, ...) now use the patterns given by CLDR (like it was in AngularJS) instead of the ones from the intl API. You might notice some changes, e.g. shortDate will be 8/15/17 instead of 8/15/2017 for en-US.

• the narrow version of eras is now GGGGG instead of G, the format G is now similar to GG and GGG.

• the narrow version of months is now MMMMM instead of L, the format L is now the short standalone version of months.
• the narrow version of the week day is now EEEEE instead of E, the format E is now similar to EE and EEE.
• the timezone z will now fallback to O and output GMT+1 instead of the complete zone name (e.g. Pacific Standard Time), this is because the quantity of data required to have all the zone names in all of the existing locales is too big.

• the timezone Z will now output the ISO8601 basic format, e.g. +0100, you should now use ZZZZ to get GMT+01:00.

  You should change your date pipe

  

Also you need to provide your language in app.module like this:

Answer 2

I've updated app.mudule.ts in order to localize dates.

// app.mudule.ts

...
import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeRu from '@angular/common/locales/ru';

registerLocaleData(localeRu);

@NgModule({
  ...
  providers: [
    ...
    { provide: LOCALE_ID, useValue: 'ru' }
  ],
  bootstrap: [AppComponent]
})

// feed-list-item.component.html (nothing was updated here)

...
<span>{{ event.date | date:'fullDate'}}</span>
...