ng2-translate customLoader & multiple files per language

Question

In an Ionic2 app I'm using ng2-translate the strings in my app.

Now I need to split the translation file into several files per language, for example de.json and de_gs1ais.json. As ng2-translate is limited to one file per language I've tried to implement a custom loader:

class CustomLoader implements TranslateLoader {
  private http: Http;
  public getTranslation(lang: String): Observable<any> {
    return this.http.get("assets/i18n" + "/" + lang + ".json").map((res) => res.json());

  }
}

This class implements the standard ng2-translate behaviour, while with the following class I'd expect the 2 files de.json and de_gs1ais.json to be loaded:

class CustomLoader implements TranslateLoader {
  private http: Http;
  public getTranslation(lang: String): Observable<any> {
    return this.http.get("assets/i18n" + "/" + lang + ".json").merge(
    this.http.get("assets/i18n" + "/" + lang + "_gs1ais.json")).map((res) => res.json());

  }
}

The problem is that again only the first file (de.json) is loaded. Changing the order of the observables in the codes results in the other file being loaded. I thought "merge" should merge together the observables, creating one "big" observable stream with all the data.

Answer 1

What you need is a forkJoin instead of the merge.

Merge doesn't combine data - https://www.learnrxjs.io/operators/combination/merge.html

forkJoin does - https://www.learnrxjs.io/operators/combination/forkjoin.html

public getTranslation(lang: String): Observable<any> {
  let languageObservables = Rx.Observable.forkJoin(              
    this.http.get("assets/i18n" + "/" + lang + ".json"),
    this.http.get("assets/i18n" + "/" + lang + "_gs1ais.json")
  );
  return languageObservables.map((res) => res.json())
}