Angular 5 Breaking change - manually import locale

user_113571 0
Viewed 38112

Changelog says:

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.

But I can not find any reference what "importing" means, how to do it and I get

xxx.html:30 ERROR Error: Missing locale data for the locale "de-CH"

I configure locale with :

import { LOCALE_ID } from '@angular/core';

and

  providers: [
    { provide: LOCALE_ID, useValue: 'de-CH' }
  ],
angular
3 Answers

This is really hard to find in the current version :(. Here is what i found out:

The different locales are in the package @angular/common/locales/. In your case this is: 

import localeDECH from '@angular/common/locales/de-CH';

Now you need to register this locale definitions in your project. There is a function called registerLocaleData that is located in: @angular/common.

So your code in your app.module.ts should look like this:

import {LOCALE_ID} from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDECH from '@angular/common/locales/de-CH';

registerLocaleData(localeDECH);

@NgModule({
...
providers: [
   { provide: LOCALE_ID, useValue: 'de-ch' },
]
...
})
....
user_26885450

For

{ provide: LOCALE_ID, useValue: 'pt-BR' }

Use: 

import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';
registerLocaleData(localePt);
user_86274650
Related