Angular 5 - manually importing locale doesnt work

Since angular 5 there has been a “breaking change” to importing additional locales:

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.

Before angular 5, just having these 2 lines was enough to use for example Date filter with custom locale:

import { LOCALE_ID } from '@angular/core';
...
{ provide: LOCALE_ID, useValue: 'de-CH' }
...

but now as we see in docs: https://angular.io/guide/i18n#i18n-pipes1

By default, Angular only contains locale data for en-US. If you set the value of LOCALE_ID to another locale, you must import locale data for that new locale. The CLI imports the locale data for you when you use the parameter --locale with ng serve and ng build.

If you want to import locale data for other languages, you can do it manually:

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

But if i try to do that gives an error:

System.err: SyntaxError: Unexpected token export
System.err: File: "file:///data/data/com.example.app/files/app/tns_modul
es/@angular/common/locales/fr.js, line: 10, column: 0

This is a big issue

[hettiger]

Example workaround for de-DE until there’s a official solution:

1. Copy the file node_modules/@angular/common/locales/de.js to app/de.ts
2. In your app.module.ts file use the following code:

// TODO: Use following import instead and remove ./de.ts once https://github.com/angular/angular/issues/20605 is fixed
// import localeDe from "@angular/common/locales/de";
import { localeDe } from "./de";
registerLocaleData(localeDe);

1. Set LOCALE_ID in the providers array: { provide: LOCALE_ID, useValue: 'de' },

Of course this workaround can be applied to any locale… Keep in mind this might cause issues whenever you update your dependencies.

[xavierluz]

@hettiger

thank you!