Missing locale data for the locale "de-DE"

Question

I'm using Angular 9

In one of my components, I'm using Currency Formatting as bellow:

import { formatCurrency } from '@angular/common';
formatCurrency(23456, 'de-DE', '$')

Here, if I pass de-DE as culture, I'm getting error as below:

Missing locale data for the locale "de-DE"

But, if I pass the culture as en-DE, it's working fine.

What's the issue here? Please help in this.

Matland

Answer 1

By default angular only contains the locale data for English.

You will need to import and register the correct locale if you want it to work.

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);

then you should be able to use it.

It would make most sense to register the locale inside your app.module.ts

Detonation

Here we are loading localeDeExtra from '@angular/common/locales/extra/de' but how can I load it dynamically? I'm getting culture code from API, in such case how to get the extra from culture code? – Matland

loading it dynamically wont be possible without using lazy loading, all the imports need to be known at compile time. You could import all the locales from here: import '@angular/common/locales/global' – Detonation

for lazy loading, take a look at this approach: angulararchitects.io/aktuelles/… – Detonation

Answer 2

if you want to change the language of your app you need to register your locale in app.module.ts like this :

//Get LOCALE_ID, the register and the german package
import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import * as de from '@angular/common/locales/de';
...

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'de-DE' } //Add the id and the language code here
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    registerLocaleData(de.default); //Then register the language
  }
}

Hope that will help you

Mosul

btw, if this problem occurs in tests, just register the locale in test.ts – Phthisic