From 383e47537f44670cb1c0cc77ca6ab12fccc5adee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Barbeau?= Date: Tue, 18 Apr 2017 12:07:38 -0400 Subject: [PATCH] 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 | 10 ++--- demo-app/app/app.component.spec.ts | 13 ------- demo-app/app/app.component.ts | 9 ++++- demo-app/app/app.module.ts | 15 +------- demo-app/assets/locale/en.json | 2 + demo-app/assets/locale/fr.json | 3 ++ .../assets}/locale/template.json | 0 {assets => lib/assets}/locale/en.json | 0 {assets => lib/assets}/locale/fr.json | 2 +- lib/src/language/module.ts | 22 +++++++---- .../language/shared/language.service.spec.ts | 13 +++++-- lib/src/language/shared/language.service.ts | 38 ++++++++++++++++--- .../shared/missing-translation.guard.ts | 2 +- lib/src/module.ts | 11 ------ lib/src/shared/module.ts | 2 +- lib/test/module.ts | 15 +------- package.json | 6 +-- webpack.conf.js | 2 +- 18 files changed, 84 insertions(+), 81 deletions(-) create mode 100644 demo-app/assets/locale/en.json create mode 100644 demo-app/assets/locale/fr.json rename {assets => demo-app/assets}/locale/template.json (100%) rename {assets => lib/assets}/locale/en.json (100%) rename {assets => lib/assets}/locale/fr.json (100%) diff --git a/demo-app/app/app.component.html b/demo-app/app/app.component.html index ca04834baf..bfccbe8730 100644 --- a/demo-app/app/app.component.html +++ b/demo-app/app/app.component.html @@ -3,7 +3,7 @@ search-bar.component @@ -31,7 +31,7 @@ Map module - map-browser.component + map-browser.component Layer module - layer-list.component + layer-list.component @@ -51,8 +51,8 @@ Filter module - time-filter.component + time-filter.component - \ No newline at end of file + diff --git a/demo-app/app/app.component.spec.ts b/demo-app/app/app.component.spec.ts index 9536e9dbbc..9837f6910f 100644 --- a/demo-app/app/app.component.spec.ts +++ b/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: [ diff --git a/demo-app/app/app.component.ts b/demo-app/app/app.component.ts index c08951d81d..5a2b3476b3 100644 --- a/demo-app/app/app.component.ts +++ b/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(); diff --git a/demo-app/app/app.module.ts b/demo-app/app/app.module.ts index 190eb92d15..443a9b10dc 100644 --- a/demo-app/app/app.module.ts +++ b/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: [ diff --git a/demo-app/assets/locale/en.json b/demo-app/assets/locale/en.json new file mode 100644 index 0000000000..2c63c08510 --- /dev/null +++ b/demo-app/assets/locale/en.json @@ -0,0 +1,2 @@ +{ +} diff --git a/demo-app/assets/locale/fr.json b/demo-app/assets/locale/fr.json new file mode 100644 index 0000000000..0db3279e44 --- /dev/null +++ b/demo-app/assets/locale/fr.json @@ -0,0 +1,3 @@ +{ + +} diff --git a/assets/locale/template.json b/demo-app/assets/locale/template.json similarity index 100% rename from assets/locale/template.json rename to demo-app/assets/locale/template.json diff --git a/assets/locale/en.json b/lib/assets/locale/en.json similarity index 100% rename from assets/locale/en.json rename to lib/assets/locale/en.json diff --git a/assets/locale/fr.json b/lib/assets/locale/fr.json similarity index 100% rename from assets/locale/fr.json rename to lib/assets/locale/fr.json index 2ccf637000..c5edb595b7 100644 --- a/assets/locale/fr.json +++ b/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", diff --git a/lib/src/language/module.ts b/lib/src/language/module.ts index baa689074f..1af3ace834 100644 --- a/lib/src/language/module.ts +++ b/lib/src/language/module.ts @@ -1,11 +1,20 @@ 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 { @@ -13,11 +22,8 @@ export class IgoLanguageModule { return { ngModule: IgoLanguageModule, providers: [ - LanguageService, - { - provide: MissingTranslationHandler, - useClass: IgoMissingTranslationHandler - } + TranslateService, + LanguageService ] }; } diff --git a/lib/src/language/shared/language.service.spec.ts b/lib/src/language/shared/language.service.spec.ts index de65b4814f..14453ae795 100644 --- a/lib/src/language/shared/language.service.spec.ts +++ b/lib/src/language/shared/language.service.spec.ts @@ -1,9 +1,11 @@ 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', () => { @@ -11,9 +13,14 @@ describe('LanguageService', () => { TestBed.configureTestingModule({ imports: [ IgoTestModule, - TranslateModule + TranslateModule.forRoot({ + missingTranslationHandler: { + provide: MissingTranslationHandler, + useClass: IgoMissingTranslationHandler + } + }) ], - providers: [] + providers: [ TranslateService ] }); }); diff --git a/lib/src/language/shared/language.service.ts b/lib/src/language/shared/language.service.ts index b244f9e1eb..fc755591f4 100644 --- a/lib/src/language/shared/language.service.ts +++ b/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); + } + } diff --git a/lib/src/language/shared/missing-translation.guard.ts b/lib/src/language/shared/missing-translation.guard.ts index 495482b561..bdf0084c89 100644 --- a/lib/src/language/shared/missing-translation.guard.ts +++ b/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 { diff --git a/lib/src/module.ts b/lib/src/module.ts index 7eb8695de6..2f57afb345 100644 --- a/lib/src/module.ts +++ b/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(), diff --git a/lib/src/shared/module.ts b/lib/src/shared/module.ts index fc5399ebab..521d030150 100644 --- a/lib/src/shared/module.ts +++ b/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'; diff --git a/lib/test/module.ts b/lib/test/module.ts index 174607b274..8660b13727 100644 --- a/lib/test/module.ts +++ b/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: [ diff --git a/package.json b/package.json index 72d627e0f5..f619463c31 100644 --- a/package.json +++ b/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", diff --git a/webpack.conf.js b/webpack.conf.js index 797a4cf0c6..dd65577f21 100644 --- a/webpack.conf.js +++ b/webpack.conf.js @@ -61,7 +61,7 @@ module.exports = { /^rxjs\//, /^md2/, /^ts-md5/, - /^ng2-translate/, + /^ngx-translate/, /^zone.js/, /openlayers/ ],