From d9cbb2e6bdb6fcb93d4b5b6592e66efa89b56d1b Mon Sep 17 00:00:00 2001 From: Nagendra Kumar 2 Date: Wed, 17 Apr 2019 09:34:42 +0530 Subject: [PATCH 1/2] [Multiple Translate files loader --- .../http-loader/src/lib/http-loader.ts | 22 ++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/projects/ngx-translate/http-loader/src/lib/http-loader.ts b/projects/ngx-translate/http-loader/src/lib/http-loader.ts index 0afd4a9..f500abc 100644 --- a/projects/ngx-translate/http-loader/src/lib/http-loader.ts +++ b/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 { + + 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))} )); + } +} From 9aac8cc937ac8ed7e97cabd7b793bf5b10a66c4a Mon Sep 17 00:00:00 2001 From: Nagendra Kumar 2 Date: Wed, 17 Apr 2019 09:48:46 +0530 Subject: [PATCH 2/2] [Readme] Updated Readme --- README.md | 40 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b5586b..d43e9bf 100644 --- a/README.md +++ b/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