ERROR angular-l10n (formatLanguage): Invalid language

[mze9412]

Describe the bug After loading the angular app, the very first view is not translated comepletely and the error angular-l10n (formatLanguage): Invalid language is shown multiple times on the console. The page has four translated texts (ProgramFilter_Title, ProgramFilter_Description, ProgramFilter_Date, Movie_MoreDetails). Depending on loading speed (of the .json files I think), some are translated and some produce the mentioned error.

After navigating anywhere, translation works (no more errors).

I use Angular 9.1.1 with angular-l10n 9.1.0. The translation is downloaded as files from the servers. With angular 8 and the corresponding l10n version everything worked as expexted. Deactivatng Ivy

l10nConfig export const l10nConfig: L10nConfig = { format: 'language-region', providers: [ { name: 'locale', asset: './assets/localisation/locale', options: { version: '1.0.0' }}, { name: 'user', asset: './assets/localisation/user', options: { version: '1.0.0' }}, { name: 'configviewer', asset: './assets/localisation/configviewer', options: { version: '1.0.0' }}, { name: 'screeninginfo', asset: './assets/localisation/screeninginfo', options: { version: '1.0.0' }}, { name: 'program', asset: './assets/localisation/program', options: { version: '1.0.0' }}, { name: 'nav', asset: './assets/localisation/nav', options: { version: '1.0.0' }}, { name: 'payment', asset: './assets/localisation/payment', options: { version: '1.0.0' }}, { name: 'admin', asset: './assets/localisation/admin', options: { version: '1.0.0' }} ], cache: true, fallback: false, keySeparator: '.', defaultLocale: { language: 'de-DE', timeZone: 'Europe/Berlin', currency: 'EUR' }, schema: [ { locale: { language: 'en-EN', currency: 'USD', timeZone: 'Europe/Berlin' }, dir: 'ltr', text: 'United States' }, { locale: { language: 'de-DE', currency: 'EUR', timeZone: 'Europe/Berlin' }, dir: 'ltr', text: 'Deutschand/Österreich/Schweiz' } ] };

HttpTranslationLoader @Injectable() export class HttpTranslationLoader implements L10nTranslationLoader {

private headers = new HttpHeaders({ 'Content-Type': 'application/json' });

constructor(@Optional() private http: HttpClient) { }

public get(language: string, provider: L10nProvider): Observable<{ [key: string]: any }> { const url = ${provider.asset}-${language}.json; const options = { headers: this.headers, params: new HttpParams().set('v', provider.options.version) }; return this.http.get(url, options); } }

[robisim74]

Hi,

the error in console, and consequently translations that are not completed, should be due to an invalid or null language format.

• Are you sure of this format in your config: en-EN?
• Are you using APP_INITIALIZER?

[mze9412]

Are you sure of this format in your config: en-EN?

I copied the config in my original post :) Or do you mean another location?

Are you using APP_INITIALIZER?

Yes, it looks like this: { provide: APP_INITIALIZER, useFactory: initL10n, deps: [L10nLoader], multi: true },

initL10n does the following export function initL10n(l10nLoader: L10nLoader): Function { return () => l10nLoader.init(); }

[robisim74]

I meant: the right locale for the United States is en-US, and not en-EN.

However, a repro would be useful.

[mze9412]

I think the problem is in the submodule. I see that all components which belong to the app.module (header, footer, nav) work correctly. The error seems to come from the sub module component.

How do I correctly initialize/configures l10n there? Right now I just do this:

If I remove l10n in the submodule I get no errors but of course also no translations, so my submodule is not correct I guess

[robisim74]

Please, create a simple repro.

[mze9412]

Found the issue .forRoot(...) in the submodule is wrong

Thanks for the help to get me thinking and digging in a different direction :)