feat(language): add support language in lib (#13)

* feat(language): add support language in lib

* Update fr.json

* Update app.component.ts

* Update en.json

* Update fr.json

* Update module.ts

* Update language.service.spec.ts

* Update language.service.ts

demo-app/app/app.component.html

@@ -3,7 +3,7 @@
   <md-card-title>search-bar.component</md-card-title>
   <md-card-content>
     <igo-search-bar
-      [placeholder]="'Search'"
+      [placeholder]="'Search Results' | translate"
       (search)="handleSearch($event)">
     </igo-search-bar>
 
@@ -31,7 +31,7 @@
 
 <md-card>
   <md-card-subtitle>Map module</md-card-subtitle>
-  <md-card-title>map-browser.component</md-card-title>   
+  <md-card-title>map-browser.component</md-card-title>
   <md-card-content class="igo-map-browser-container">
     <igo-map-browser
       [map]="map" [view]="mapView"
@@ -43,16 +43,16 @@
 
 <md-card>
   <md-card-subtitle>Layer module</md-card-subtitle>
-  <md-card-title>layer-list.component</md-card-title>   
+  <md-card-title>layer-list.component</md-card-title>
   <md-card-content>
     <igo-layer-list [layers]="map.layers$ | async"></igo-layer-list>
   </md-card-content>
 </md-card>
 
 <md-card>
   <md-card-subtitle>Filter module</md-card-subtitle>
-  <md-card-title>time-filter.component</md-card-title>   
+  <md-card-title>time-filter.component</md-card-title>
   <md-card-content>
     <igo-time-filter-list [layers]="map.layers$ | async"></igo-time-filter-list>
   </md-card-content>
-</md-card>
+</md-card>

demo-app/app/app.component.spec.ts

@@ -1,27 +1,14 @@
 import { TestBed, async } from '@angular/core/testing';
-import { Http } from '@angular/http';
 import { MaterialModule } from '@angular/material';
-import { TranslateModule, TranslateLoader,
-         TranslateStaticLoader } from 'ng2-translate';
-
 import { IgoModule, provideDefaultSearchSources } from '../../lib/src';
 
 import { AppComponent } from './app.component';
 
-export function createTranslateLoader(http: Http) {
-  return new TranslateStaticLoader(http, './locale', '.json');
-}
-
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
         MaterialModule,
-        TranslateModule.forRoot({
-          provide: TranslateLoader,
-          useFactory: createTranslateLoader,
-          deps: [Http]
-        }),
         IgoModule.forRoot()
       ],
       declarations: [

demo-app/app/app.component.ts

@@ -3,7 +3,8 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 
 import { IgoMap, LayerService,
          OverlayService, QueryFormat,
-         Feature, FeatureService, WMSLayerOptions } from '../../lib/src';
+         Feature, FeatureService,
+         WMSLayerOptions, LanguageService } from '../../lib/src';
 
 @Component({
   selector: 'igo-demo',
@@ -24,7 +25,11 @@ export class AppComponent implements OnInit {
 
   constructor(public featureService: FeatureService,
               public layerService: LayerService,
-              public overlayService: OverlayService) {}
+              public overlayService: OverlayService,
+              private language: LanguageService) {
+
+    language.readTranslation('/assets/locale/');
+  }
 
   ngOnInit() {
     this.map.removeLayers();

demo-app/app/app.module.ts

@@ -1,20 +1,12 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule, Http } from '@angular/http';
+import { HttpModule } from '@angular/http';
 import { MaterialModule } from '@angular/material';
-import { TranslateModule, TranslateLoader,
-         TranslateStaticLoader } from 'ng2-translate';
 
 import { IgoModule, provideDefaultSearchSources } from '../../lib/src';
-
 import { AppComponent } from './app.component';
 
-export function createTranslateLoader(http: Http) {
-  return new TranslateStaticLoader(http, './locale', '.json');
-}
-
-
 @NgModule({
   declarations: [
     AppComponent
@@ -24,11 +16,6 @@ export function createTranslateLoader(http: Http) {
     FormsModule,
     HttpModule,
     MaterialModule.forRoot(),
-    TranslateModule.forRoot({
-      provide: TranslateLoader,
-      useFactory: createTranslateLoader,
-      deps: [Http]
-    }),
     IgoModule.forRoot()
   ],
   providers: [

demo-app/assets/locale/en.json

@@ -0,0 +1,2 @@
+{
+}

demo-app/assets/locale/fr.json

@@ -0,0 +1,3 @@
+{
+
+}

assets/locale/fr.json → lib/assets/locale/fr.json

@@ -31,8 +31,8 @@
   "Search Results": "Résultats de recherche",
   "Search for an address or a place": "Rechercher une adresse, un lieu ou une couche",
   "Search disabled": "L'outil de recherche est désactivé dans ce contexte",
-  "Start Date": "Date de début",
   "Show Layer": "Afficher couche",
+  "Start Date": "Date de début",
   "Time Analysis": "Analyse Temporelle",
   "Title": "Titre",
 

lib/src/language/module.ts

@@ -1,23 +1,29 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { MissingTranslationHandler } from 'ng2-translate';
 
-import { LanguageService, IgoMissingTranslationHandler } from './shared';
+import { TranslateModule, MissingTranslationHandler,
+         TranslateService } from '@ngx-translate/core';
+
 
+import { LanguageService, IgoMissingTranslationHandler } from './shared';
 
 @NgModule({
-  imports: [],
+  imports: [
+    TranslateModule.forRoot({
+      missingTranslationHandler: {
+        provide: MissingTranslationHandler,
+        useClass: IgoMissingTranslationHandler
+      }
+    })
+  ],
   exports: []
 })
 export class IgoLanguageModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: IgoLanguageModule,
       providers: [
-        LanguageService,
-        {
-          provide: MissingTranslationHandler,
-          useClass: IgoMissingTranslationHandler
-        }
+        TranslateService,
+        LanguageService
       ]
     };
   }

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

@@ -1,19 +1,26 @@
 import { TestBed, inject } from '@angular/core/testing';
-import { TranslateModule } from 'ng2-translate';
+import { TranslateModule, MissingTranslationHandler,
+         TranslateService } from '@ngx-translate/core';
 
 import { IgoTestModule } from '../../../test/module';
 
 import { LanguageService } from './language.service';
+import { IgoMissingTranslationHandler } from './missing-translation.guard';
 
 
 describe('LanguageService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
         IgoTestModule,
-        TranslateModule
+        TranslateModule.forRoot({
+          missingTranslationHandler: {
+            provide: MissingTranslationHandler,
+            useClass: IgoMissingTranslationHandler
+          }
+        })
       ],
-      providers: []
+      providers: [ TranslateService ]
     });
   });
 

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

@@ -1,12 +1,40 @@
 import { Injectable } from '@angular/core';
-import { TranslateService } from 'ng2-translate';
+import { Http, Response } from "@angular/http";
+
+import { TranslateService } from '@ngx-translate/core';
+
+declare function require(arg:string): any;
 
 @Injectable()
 export class LanguageService {
 
-  constructor(public translate: TranslateService) {
-    translate.setDefaultLang('en');
-    const browserLang = translate.getBrowserLang();
-    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
+  constructor(private translate: TranslateService,
+              private http: Http) {
+    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);
+  }
+
+  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 setTranslation(lang: string, translation: Object): void {
+    this.translate.setTranslation(lang, translation, true);
+  }
+
 }

lib/src/language/shared/missing-translation.guard.ts

@@ -1,5 +1,5 @@
 import { MissingTranslationHandler,
-         MissingTranslationHandlerParams } from 'ng2-translate';
+         MissingTranslationHandlerParams } from '@ngx-translate/core';
 
 export class IgoMissingTranslationHandler
   implements MissingTranslationHandler {

lib/src/module.ts

@@ -1,8 +1,5 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { Http } from '@angular/http';
 import { MaterialModule } from '@angular/material';
-import { TranslateModule, TranslateLoader,
-         TranslateStaticLoader } from 'ng2-translate';
 
 import 'rxjs/add/operator/debounceTime.js';
 import 'rxjs/add/operator/distinctUntilChanged';
@@ -25,9 +22,6 @@ import { IgoQueryModule } from './query/index';
 import { IgoSearchModule } from './search/index';
 import { IgoSharedModule } from './shared/index';
 
-export function createTranslateLoader(http: Http) {
-  return new TranslateStaticLoader(http, './locale', '.json');
-}
 
 const IGO_MODULES = [
   IgoLanguageModule,
@@ -44,11 +38,6 @@ const IGO_MODULES = [
 @NgModule({
   imports: [
     MaterialModule.forRoot(),
-    TranslateModule.forRoot({
-      provide: TranslateLoader,
-      useFactory: createTranslateLoader,
-      deps: [Http]
-    }),
 
     IgoCoreModule.forRoot(),
     IgoLanguageModule.forRoot(),

lib/src/shared/module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule } from '@angular/material';
-import { TranslateModule } from 'ng2-translate';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { ClickoutDirective } from './clickout';
 import { CollapsibleComponent, CollapseDirective } from './collapsible';

lib/test/module.ts

@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
-import { Http } from '@angular/http';
-import { TranslateModule, TranslateLoader,
-         TranslateStaticLoader } from 'ng2-translate';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { IgoLanguageModule } from '../src/language';
 
@@ -15,18 +13,9 @@ import 'rxjs/add/operator/finally';
 
 import 'openlayers';
 
-
-export function createTranslateLoader(http: Http) {
-  return new TranslateStaticLoader(http, 'base/assets/locale', '.json');
-}
-
 @NgModule({
   imports: [
-    TranslateModule.forRoot({
-      provide: TranslateLoader,
-      useFactory: createTranslateLoader,
-      deps: [Http]
-    }),
+    TranslateModule.forRoot(),
     IgoLanguageModule.forRoot()
   ],
   exports: [

package.json

@@ -27,10 +27,10 @@
     "@angular/http": "^4.0.0",
     "@angular/material": "git+https://github.com/angular/material2-builds.git",
     "@angular/platform-browser": "^4.0.0",
+    "@ngx-translate/core": "^6.0.1",
     "core-js": "^2.4.1",
-    "openlayers": "^4.0.1",
     "md2": "0.0.18",
-    "ng2-translate": "^5.0.0",
+    "openlayers": "^4.0.1",
     "rxjs": "^5.1.0",
     "ts-md5": "^1.2.0",
     "zone.js": "^0.8.4"
@@ -42,7 +42,7 @@
     "@angular/platform-server": "^4.0.0",
     "@angular/router": "^4.0.0",
     "@types/jasmine": "2.5.38",
-    "@types/node": "^6.0.67",
+    "@types/node": "^6.0.68",
     "@types/openlayers": "^4.0.1",
     "angular2-template-loader": "^0.6.2",
     "awesome-typescript-loader": "^3.1.2",

webpack.conf.js

@@ -61,7 +61,7 @@ module.exports = {
      /^rxjs\//,
      /^md2/,
      /^ts-md5/,
-     /^ng2-translate/,
+     /^ngx-translate/,
      /^zone.js/,
      /openlayers/
    ],