Sometimes DefaultLang translations are not loaded when starting the app

Current behavior

This issue may be similar to: https://github.com/ngx-translate/core/issues/1162.

In my case I noticed that the app, while in production, sometimes fails to fallback to the default language on the first loaded screen (i.e. app first startup on load).

For example:

1. Main resources file is ‘en.json’. There is also an additional ‘es.json’ which is empty ‘{}’.
2. When the app loads it sets ‘en’ as the default language: this.translate.setDefaultLang('en');
3. The app upon startup sets the current lang to ‘es’: this.translate.use('es').
4. In this case, sometimes, the fallback to ‘en’ fails and I see the resource key instead.

Some observations:

1. If the app sets the language to be ‘en’ on startup, I don’t see the problem reoccur.
2. If the es.json file is not empty but has a translation, the problem does not occur.

For these reasons I suspect that the problem is with falling back to the default language when a resource is missing.

I tried various solutions to delay loading and ensure the translations are available but unfortunately could not workaround these problems. Here are some of the things I tried:

• https://stackoverflow.com/a/38919198/3208034
• https://stackoverflow.com/a/65835085/3208034
• https://www.vitamindev.com/angular/how-to-load-translations-when-the-application-starts/

Expected behavior

The default language should be used for missing keys in the selected language, also upon application startup.

Environment

ngx-translate version: 13.0.0
Angular version: 12.1.0

Browser:
- Chrome (desktop) version 95
 
For Tooling issues:
- Node version: 14.17.1
- Platform:  win32 x64

[rbalet]

Hi @ewolfman. I had the same problem, which came funnily from my httpInterceptor.

I was using the angular http to load my file, but it was then delayed by my httpInterceptor, which then had created a problem while instantiating the TranslateService.

Here’s how I fixed it.

1. I recreated the MultiTranslateHttpLoader to be able to add the X-Skip-Interceptor

export class MegaphoneMultiTranslateHttpLoader implements TranslateLoader {
  constructor(private http: HttpClient, private resourcesPrefix: string[]) {}

  public getTranslation(lang: string): Observable<any> {
  
  
    const headers = new HttpHeaders() // <-- Skipping httpInerceptor
      .set('X-Skip-Interceptor', '')
      .set('Content-Type', 'application/json; charset=utf-8')

    const requests = this.resourcesPrefix.map((prefix) => {
      const path = `${prefix}${lang}.json`

      return this.http.get(path, { headers }).pipe(
        catchError((res) => {
          console.group('MegaphoneMultiTranslateHttpLoader')
          console.error('Something went wrong for the following translation file:', path)
          console.error('Content of the error: ', res)
          console.groupEnd()
          return of({})
        }),
      )
    })

    return forkJoin(requests).pipe(map((response) => merge.all(response)))
  }
}

2. Skip it in the httpInterceptor

Here, I listen to the headers, if it does have the InterceptorSkipHeader, skip it

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  const InterceptorSkipHeader = 'X-Skip-Interceptor'

    if (request.headers.has(InterceptorSkipHeader)) {
      const headers = request.headers.delete(InterceptorSkipHeader)
      return next.handle(request.clone({ headers }))
    }
  // ...
}

@ocombe I think this could be communicated somewhere in the wiki

[rbalet]

@ocombe Feel free to close this issue since I took over the library that was causing the problem & fixed the problem there