[Merge Request] Code Changes to load Multiple Translate files

README.md

@@ -30,7 +30,7 @@ Choose the version corresponding to your Angular version:
  2 to 4.2.x  | 7.x or less         | 0.x
 
 ## Usage
-#### 1. Setup the `TranslateModule` to use the `TranslateHttpLoader`:
+#### 1. Setup the `TranslateModule` to use the `TranslateHttpLoader`, `MultipleTranslateHttpLoader`:
 
 The `TranslateHttpLoader` uses HttpClient to load translations, which means that you have to import the HttpClientModule from `@angular/common/http` before the `TranslateModule`:
 
@@ -78,6 +78,44 @@ export function HttpLoaderFactory(http: HttpClient) {
 }
 ```
 
+
+At times, we might require to load multiple translation files for application or module from different sources, `MultipleTranslateHttpLoader` comes very handy in such scenarios. The `MultipleTranslateHttpLoader` also uses HttpClient to load translations with mandatory second parameter `paths`, which means that you have to import the HttpClientModule from `@angular/common/http` before the `TranslateModule`:
+
+```ts
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {HttpClientModule, HttpClient} from '@angular/common/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {MultipleTranslateHttpLoader} from '@ngx-translate/http-loader';
+import {AppComponent} from "./app";
+
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(http: HttpClient) {
+  const paths=[ 
+    {prefix:'/assets/i18n/module/file1', suffix:'.json'},
+    {prefix:'/assets/i18n/module/file2', suffix:'.json'},
+    {prefix:'/assets/i18n/module/file3', suffix:'.json'}];
+
+    return new MultipleTranslateHttpLoader(http, paths);
+}
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        HttpClientModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: HttpLoaderFactory,
+                deps: [HttpClient]
+            }
+        })
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
 For now this loader only support the json format.
 
 ## Angular CLI/Webpack TranslateLoader Example

projects/ngx-translate/http-loader/src/lib/http-loader.ts

@@ -1,6 +1,11 @@
 import {HttpClient} from "@angular/common/http";
 import {TranslateLoader} from "@ngx-translate/core";
-import {Observable} from 'rxjs';
+import {Observable, of, forkJoin} from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+interface TranslateFilesList {
+  prefix: string ; suffix: string;
+}
 
 export class TranslateHttpLoader implements TranslateLoader {
   constructor(private http: HttpClient, public prefix: string = "/assets/i18n/", public suffix: string = ".json") {}
@@ -12,3 +17,18 @@ export class TranslateHttpLoader implements TranslateLoader {
     return this.http.get(`${this.prefix}${lang}${this.suffix}`);
   }
 }
+
+export class MultipleTranslateHttpLoader implements TranslateLoader {
+  constructor(private http: HttpClient, public paths:TranslateFilesList[]) {}
+
+  /**
+   * Gets the multiple translations from the server
+   */
+  public getTranslation(lang: string): Observable<Object> {
+
+    return   new Observable(obs=>forkJoin(this.paths.map( item => this.http.get('' + item.prefix + lang +  item.suffix).pipe(catchError(res => {
+      console.error("[Error] Something went wrong with --> ", res.url);
+      return of({});
+    })) ) ).subscribe( res=> { obs.next( Object.assign({}, ...res))} ));
+  }
+}