Fallback/Override language file

[irundaia]

I'm submitting a ... [ ] bug report => check the FAQ and search github for a similar issue or PR before submitting [ ] support request => check the FAQ and search github for a similar issue before submitting [x] feature request

What is the motivation / use case for changing the behavior? We're currently in the process of building a hybrid web app using ionic/angular.

We got a requirement from our stakeholders that they'd like to be able to change the static texts in the app without needing a new release.

So far this all makes sense and it is possible using your ngx-translate module. However, it's undesirable to get in a situation where a user opens his app in a place with bad/no cellular reception, and having an app showing the internal keys used for the internationalisation of the app.

For the case where the user has no access to the network this is totally doable, by implementing our own fallback enabled TranslateLoader. This loader would fallback to a locally bundled translation file whenever an error occurs during the loading of the remote translation file. This would result in something along the lines of:

export class MyTranslateLoader implements TranslateLoader  {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string): Observable<any> {
    return this.getRemoteTranslation(lang).catch(() => this.getBundledTranslation(lang));
  }

  private getRemoteTranslation(lang: string): Observable<any>;
  private getBundledTranslation(lang: string): Observable<any>;
}

This does not cover slow networks (persé). The app would still show the internal keys whilst attempting to load the remote translations (which could take a long time). To also deal with this situation, we'd like to be able to override preloaded translations whilst still using the TranslateLoader abstraction. (We like the separation of the logic needed to simply retrieve the translations versus the logic needed to change between languages.) Ideally, this would only change the getTranslation function to something along the lines of:

getTranslation(lang: string): Observable<any> {
  return this.getBundledTranslation(lang).concat(this.getRemoteTranslation(lang))
}

Current behavior Currently, the TranslateService only takes the first result from the resulting observable. So it would always show the bundled translations.

Desired behavior If we were to remove the limitation of only subscribing on the first translation, this would make the above method work in a sensible manner whilst keeping the separation of concerns between changing/loading languages.

Note that this is only a small change, that won't affect existing users, since they will already be passing an observable with at most one element, thus completing the observable once the translation has been loaded.

If you're open to a PR, please let me know!

Please tell us about your environment:

• ngx-translate version:

  @ngx-translate/core: 8.0.0,
  @ngx-translate/http-loader: 2.0.0,

• Angular version: 4.4.4

• Browser: Mobile (hybrid) app WKWebview/Android WebView

P.s. I'm sorry for shifting the issue template around. I think it makes more sense in this case.

[danigar]

I'm facing the same scenario. Any news about this?

[greg-witczak]

+1 on it - any news?

[LosD]

Since the observable is currently completed after a single translation, unsubscribing can be skipped without having leaks (when using TranslateService directly). Wouldn't that change if this suggestion is implemented? That seems like a dangerous change to me, especially since it's rather hard to detect that something is wrong.

[maks-humeniuk]

Try this.

import { catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TranslateLoader } from '@ngx-translate/core';

export class HttpTranslateLoader implements TranslateLoader {
  constructor(private httpClient: HttpClient) {
  }

  getTranslation(lang: string): Observable<File> {
    const remote = `/path/to/remote-translations/${lang}.json`;
    const bundled = `/path/to/bundled-translations/${lang}.json`;
    return this.httpClient.get<File>(remote).pipe(
      catchError((): Observable<File> => {
        return this.httpClient.get<File>(bundled);
      })
    );
  }
}