Issue when loading unavailable translation file from the current browser language

[FathyV]

I'm having a case where:
Instead of loading only the default language I have configured in the app.module.ts, the library is also loaded the current browser language as well, which I don't have the translation available for it yet.
For example, I only have translation for English & French. But in the browser, the current language is set to German.
Therefore, it will throws an error message when trying to do that. Is there a proper way to handle the error, or some configuration which I could prevent the library from loading browser language, or maybe changing the order if possible? It happened when I called the init() function.

Here is the app.module.ts configuration for the translation.

...
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      },
      defaultLanguage: 'en'
    }),
    TranslateCacheModule.forRoot({
      cacheService: {
        provide: TranslateCacheService,
        useFactory: (translateService, translateCacheSettings) => {
          return new TranslateCacheService(translateService, translateCacheSettings)
        },
        deps: [TranslateService, TranslateCacheSettings]
      }
    })
...
export class AppModule {
  constructor(translateService: TranslateService,
    translateCacheService: TranslateCacheService) {
    translateService.use('en');
    translateCacheService.init();
  }
}

I've attached the error message below. Let me know if you need more information.

[erhardos]

It fills odd but you can always directly modify your storage before initializing translateCacheService e.g.

localStorage.setItem('lang', 'en');
translateService.use('en');
translateCacheService.init();