feat(translate): add translate support

karma.conf.js

@@ -24,6 +24,13 @@ module.exports = function (config) {
         nocache: false,
         served: true
       },
+      {
+        pattern: './src/demo-app/assets/locale/*.json',
+        watched: false,
+        included: false,
+        nocache: false,
+        served: true
+      },
       { pattern: './src/test/test.ts', watched: false }
     ],
     preprocessors: {

src/demo-app/app/app.component.ts

@@ -31,10 +31,7 @@ export class AppComponent implements OnInit {
   constructor(public featureService: FeatureService,
               public layerService: LayerService,
               public overlayService: OverlayService,
-              public language: LanguageService) {
-
-    // this.language.readTranslation('/assets/locale/');
-  }
+              public language: LanguageService) {}
 
   ngOnInit() {
     this.map.removeLayers();

src/demo-app/app/app.module.ts

@@ -1,12 +1,18 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpModule, Http } from '@angular/http';
 import { MaterialModule } from '@angular/material';
 
-import { IgoModule, provideDefaultSearchSources } from '../../lib';
+import { IgoModule, provideDefaultSearchSources,
+         LanguageLoader, provideLanguageService } from '../../lib';
+
 import { AppComponent } from './app.component';
 
+export function translateLoader(http: Http) {
+  return new LanguageLoader(http, './assets/locale/', '.json');
+}
+
 @NgModule({
   declarations: [
     AppComponent
@@ -19,7 +25,10 @@ import { AppComponent } from './app.component';
     IgoModule.forRoot()
   ],
   providers: [
-    ...provideDefaultSearchSources()
+    ...provideDefaultSearchSources(),
+    provideLanguageService({
+      loader: translateLoader
+    })
   ],
   bootstrap: [AppComponent]
 })

src/lib/language/module.ts

@@ -3,8 +3,8 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { TranslateModule, MissingTranslationHandler,
          TranslateService } from '@ngx-translate/core';
 
-
-import { LanguageService, IgoMissingTranslationHandler } from './shared';
+import { LanguageService, IgoMissingTranslationHandler,
+  provideLanguageService } from './shared';
 
 @NgModule({
   imports: [
@@ -23,7 +23,8 @@ export class IgoLanguageModule {
       ngModule: IgoLanguageModule,
       providers: [
         TranslateService,
-        LanguageService
+        LanguageService,
+        provideLanguageService()
       ]
     };
   }

src/lib/language/shared/index.ts

@@ -1,2 +1,5 @@
 export * from './language.service';
+export * from './language-loader';
 export * from './missing-translation.guard';
+
+export * from './language.service.provider';

src/lib/language/shared/language-loader.ts

@@ -0,0 +1,31 @@
+import { Http, Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+
+import { TranslateLoader } from '@ngx-translate/core';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/combineLatest';
+
+declare function require(arg: string): any;
+
+export class LanguageLoader implements TranslateLoader {
+    constructor(private http?: Http,
+                private prefix: string = '/assets/locale/',
+                private suffix: string = '.json') {}
+
+    public getTranslation(lang: string): any {
+      const translation = require(`../../../assets/locale/${lang}.json`);
+      const igoLocale$ = Observable.of(translation);
+
+      if (!this.http) {
+        return igoLocale$;
+      }
+
+      const appLocale$ = this.http.get(`${this.prefix}${lang}${this.suffix}`)
+          .map((res: Response) => res.json());
+
+      return igoLocale$.combineLatest(appLocale$, (igoTranslation, appTranslation) => {
+        return Object.assign(igoTranslation, appTranslation);
+      });
+
+    }
+}

src/lib/language/shared/language.service.provider.ts

@@ -0,0 +1,20 @@
+import { Http } from '@angular/http';
+import { TranslateLoader } from '@ngx-translate/core';
+
+import { LanguageLoader } from './language-loader';
+
+export interface LanguageModuleConfig {
+  loader?: (http: Http) => LanguageLoader;
+}
+
+export function defaultTranslateLoader() {
+  return new LanguageLoader();
+}
+
+export function provideLanguageService(config: LanguageModuleConfig = {}) {
+  return {
+    provide: TranslateLoader,
+    useFactory: (config.loader) || (defaultTranslateLoader),
+    deps: [Http]
+  };
+}

src/lib/language/shared/language.service.ts

@@ -1,40 +1,22 @@
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-
+import { Injectable, NgZone } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
-declare function require(arg: string): any;
-
 @Injectable()
 export class LanguageService {
 
-  constructor(private translate: TranslateService,
-              private http: Http) {
+  constructor(private translate: TranslateService, private zone: NgZone) {
     const lang = this.getLanguage();
-
-    const translation = require(`../../../assets/locale/${lang}.json`);
-    this.translate.setTranslation(lang, translation, true);
-    // this.readTranslation('/lib/assets/locale/', lang);
-
-    this.translate.setDefaultLang('en');
-    this.translate.use(lang);
+    this.translate.setDefaultLang(lang);
   }
 
   public getLanguage(): string {
     const browserLang = this.translate.getBrowserLang();
     return browserLang.match(/en|fr/) ? browserLang : 'en';
   }
 
-  public readTranslation(prefix: string, lang: string = this.getLanguage()): any {
-    return this.http.get(`${prefix}${lang}.json`)
-      .map((res: Response) => res.json())
-      .subscribe((translation) => {
-        this.translate.setTranslation(lang, translation, true);
-      });
+  public setLanguage(language: string) {
+    this.translate.use(language);
+    this.translate.reloadLang(language);
+    this.zone.run(() => {});
   }
-
-  public setTranslation(lang: string, translation: Object): void {
-    this.translate.setTranslation(lang, translation, true);
-  }
-
 }