Merge pull request #35 from angular-starter-kit/feature/i18n-json

Updated translation system to use embedded .json files (#3, fix #27)

.gitignore

@@ -43,7 +43,7 @@ npm-debug.log
 testem.log
 /typings
 /reports
-/src/translations/template.pot
+/src/translations/template.*
 /src/environments/.env.json
 
 # E2E

README.md

@@ -70,7 +70,7 @@ npm test                      | Run unit tests via [Karma](https://karma-runner.
 npm run test:ci               | Lint code and run unit tests once for continuous integration
 npm run e2e                   | Run e2e tests using [Protractor](http://www.protractortest.org)
 npm run lint                  | Lint code
-npm run translations:extract  | Extract strings from code and templates to `src/app/translations/template.pot`
+npm run translations:extract  | Extract strings from code and templates to `src/app/translations/template.json`
 npm run docs                  | Display project documentation
 
 When building the application, you can specify the target environment using the additional flag `--env <name>` (do not
@@ -100,7 +100,7 @@ Tasks are mostly based on the `angular-cli` tool. Use `ng help` to get more help
 
 The app template is based on [HTML5](http://whatwg.org/html), [TypeScript](http://www.typescriptlang.org) and
 [Sass](http://sass-lang.com). The translation files use the common
-[Gettext](https://www.gnu.org/software/gettext/manual/index.html) format.
+[JSON](http://www.json.org) format.
 
 #### Tools
 
@@ -125,7 +125,7 @@ Development, build and quality processes are based on [angular-cli](https://gith
 - [Font Awesome](http://fontawesome.io)
 - [RxJS](http://reactivex.io/rxjs)
 - [ng-bootsrap](https://ng-bootstrap.github.io/)
-- [ng2-translate](https://github.com/ocombe/ng2-translate)
+- [ngx-translate](https://github.com/ngx-translate/core)
 - [Lodash](https://lodash.com)
 
 #### Coding guides

docs/i18n.md

@@ -1,6 +1,6 @@
 # I18n
 
-The internationalization of the application is managed by [ng2-translate](https://github.com/ocombe/ng2-translate).
+The internationalization of the application is managed by [ngx-translate](https://github.com/ngx-translate/core).
 
 ## Adding translatable strings
 
@@ -29,9 +29,9 @@ translateService.get('My page title').subscribe((res: string) => { title = res;
 ## Extracting strings to translate
 
 Once you are ready to translate your app, just run `npm translations:extract`.
-It will create a `template.pot` file in the `src/translations` folder.
+It will create a `template.json` file in the `src/translations` folder.
 
-You can then use software like [Poedit](http://www.poedit.net) to generate the `.po` files for each of your supported
-languages, and put them in the `src/translations` folder.
+You can then use any text or code editor to generate the `.json` files for each of your supported languages, and put
+them in the `src/translations` folder.
 
 Do no forget to edit the files in `src/environment` to add the supported languages of your application. 

package.json

@@ -11,7 +11,7 @@
     "test": "ng test",
     "test:ci": "npm run lint && ng test --single-run --code-coverage",
     "e2e": "ng e2e",
-    "translations:extract": "ng2-translate-extract --dir ./src --output ./src/translations --format=pot --clean",
+    "translations:extract": "ng2-translate-extract --dir ./src --output ./src/translations --format=json --clean",
     "docs": "hads ./docs -o",
     "env": "env2json npm_package_version -o src/environments/.env.json"
   },
@@ -25,13 +25,12 @@
     "@angular/platform-browser": "^2.4.0",
     "@angular/platform-browser-dynamic": "^2.4.0",
     "@angular/router": "^3.4.0",
-    "@biesbjerg/ng2-translate-po-loader": "^0.2.1",
     "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
+    "@ngx-translate/core": "^6.0.0",
     "bootstrap": "4.0.0-alpha.6",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "lodash": "^4.17.4",
-    "ng2-translate": "^5.0.0",
     "rxjs": "^5.1.0",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.7.6"

src/app/about/about.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from 'ng2-translate';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { AboutRoutingModule } from './about-routing.module';
 import { AboutComponent } from './about.component';

src/app/app.component.html

@@ -1,4 +1,2 @@
-<div [hidden]="!hasLoaded">
-  <app-header></app-header>
-  <router-outlet></router-outlet>
-</div>
+<app-header></app-header>
+<router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateModule } from 'ng2-translate';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';

src/app/app.component.ts

@@ -7,7 +7,7 @@ import 'rxjs/add/operator/mergeMap';
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
-import { TranslateService } from 'ng2-translate';
+import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs/Observable';
 
 import { environment } from '../environments/environment';
@@ -23,8 +23,6 @@ const log = new Logger('app');
 })
 export class AppComponent implements OnInit {
 
-  hasLoaded = false;
-
   constructor(private router: Router,
               private activatedRoute: ActivatedRoute,
               private titleService: Title,
@@ -42,11 +40,6 @@ export class AppComponent implements OnInit {
     // Setup translations
     this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);
 
-    // Only display app after language is loaded, to avoid text blinking
-    this.translateService.onLangChange
-      .first()
-      .subscribe(() => { this.hasLoaded = true; });
-
     // Change page title on navigation or language change, based on route data
     const onNavigationEnd = this.router.events.filter(event => event instanceof NavigationEnd);
     Observable.merge(this.translateService.onLangChange, onNavigationEnd)

src/app/app.module.ts

@@ -1,10 +1,9 @@
 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 { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule, TranslateLoader } from 'ng2-translate';
-import { TranslatePoLoader } from '@biesbjerg/ng2-translate-po-loader';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -14,21 +13,12 @@ import { SharedModule } from './shared/shared.module';
 import { HomeModule } from './home/home.module';
 import { AboutModule } from './about/about.module';
 
-// Needs to be a separate function for AoT compatibility
-export function createTranslateLoader(http: Http) {
-  return new TranslatePoLoader(http, 'translations', '.po');
-}
-
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
-    TranslateModule.forRoot({
-      provide: TranslateLoader,
-      useFactory: createTranslateLoader,
-      deps: [Http]
-    }),
+    TranslateModule.forRoot(),
     NgbModule.forRoot(),
     CoreModule,
     SharedModule,

src/app/core/core.module.ts

@@ -2,7 +2,7 @@ import { NgModule, Optional, SkipSelf } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from 'ng2-translate';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { HeaderComponent } from './header/header.component';
 import { I18nService } from './i18n.service';

src/app/core/header/header.component.spec.ts

@@ -3,7 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule } from 'ng2-translate';
+import { TranslateModule } from '@ngx-translate/core';
 import { I18nService } from '../i18n.service';
 
 import { HeaderComponent } from './header.component';

src/app/core/i18n.service.spec.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:no-unused-variable */
 import { TestBed, async, inject } from '@angular/core/testing';
-import { TranslateService, LangChangeEvent } from 'ng2-translate';
+import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { Subject } from 'rxjs/Subject';
 
 import { I18nService } from './i18n.service';

src/app/core/i18n.service.ts

@@ -1,7 +1,10 @@
 import { Injectable } from '@angular/core';
-import { TranslateService, LangChangeEvent } from 'ng2-translate';
+import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 import { includes } from 'lodash';
 
+const enUS = require('../../translations/en-US.json');
+const frFR = require('../../translations/fr-FR.json');
+
 const languageKey = 'language';
 
 @Injectable()
@@ -10,7 +13,11 @@ export class I18nService {
   defaultLanguage: string;
   supportedLanguages: string[];
 
-  constructor(private translateService: TranslateService) { }
+  constructor(private translateService: TranslateService) {
+    // Embed languages to avoid extra HTTP requests
+    translateService.setTranslation('en-US', enUS );
+    translateService.setTranslation('fr-FR', frFR);
+  }
 
   /**
    * Initializes i18n for the application.

src/app/home/home.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpModule } from '@angular/http';
-import { TranslateModule } from 'ng2-translate';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { SharedModule } from '../shared/shared.module';
 import { HomeRoutingModule } from './home-routing.module';

src/translations/en-US.json

@@ -0,0 +1,7 @@
+{
+  "APP_NAME": "ngX Starter Kit",
+  "Version": "Version",
+  "Home": "Home",
+  "About": "About",
+  "Hello world !": "Hello world !"
+}

src/translations/fr-FR.json

@@ -0,0 +1,7 @@
+{
+  "APP_NAME": "ngX Starter Kit",
+  "Version": "Version",
+  "Home": "Accueil",
+  "About": "A propos",
+  "Hello world !": "Bonjour le monde !"
+}