feat(i18n): angular i18n native implementation

gulpfile.ts

@@ -138,6 +138,13 @@ gulp.task('test', (done: any) =>
               'karma.run',
               done));
 
+// --------------
+// Clean directories after i18n
+// TODO: find a better way to do it
+gulp.task('clean.i18n', (done: any) =>
+  runSequence('clear.files',
+              done));
+
 // --------------
 // Clean dev/coverage that will only run once
 // this prevents karma watchers from being broken when directories are deleted

package.json

@@ -17,6 +17,7 @@
     "e2e": "protractor",
     "e2e.live": "protractor --elementExplorer",
     "gulp": "gulp",
+    "i18n": "ng-xi18n && gulp clean.i18n",
     "karma": "karma",
     "karma.start": "karma start",
     "postinstall": "gulp check.versions && gulp build.bundle.rxjs && npm prune && gulp webdriver && gulp print.banner",
@@ -38,7 +39,7 @@
   "license": "MIT",
   "devDependencies": {
     "@angular/compiler-cli": "^0.6.1",
-    "@angular/platform-server": "^2.0.0",
+    "@angular/platform-server": "^2.0.2",
     "@angular/tsc-wrapped": "^0.3.0",
     "@types/async": "^2.0.31",
     "@types/browser-sync": "^0.0.32",
@@ -62,7 +63,7 @@
     "@types/zone.js": "^0.0.26",
     "async": "^2.0.1",
     "autoprefixer": "^6.3.7",
-    "browser-sync": "^2.13.0",
+    "browser-sync": "^2.17.1",
     "codelyzer": "1.0.0-beta.0",
     "colorguard": "^1.2.0",
     "compression": "^1.6.2",
@@ -71,6 +72,7 @@
     "connect-livereload": "^0.5.4",
     "cssnano": "^3.7.3",
     "deep-extend": "^0.4.1",
+    "del": "^2.2.2",
     "doiuse": "^2.4.1",
     "event-stream": "^3.3.3",
     "express": "~4.14.0",
@@ -118,8 +120,8 @@
     "run-sequence": "^1.2.2",
     "semver": "^5.3.0",
     "serve-static": "^1.11.1",
-    "slash": "~1.0.0",
-    "stylelint": "^7.0.2",
+    "slash": "^1.0.0",
+    "stylelint": "^7.4.0",
     "stylelint-config-standard": "^11.0.0",
     "supports-color": "^3.1.2",
     "systemjs-builder": "0.15.31",
@@ -133,14 +135,14 @@
     "yargs": "^4.8.0"
   },
   "dependencies": {
-    "@angular/common": "^2.0.1",
-    "@angular/compiler": "^2.0.1",
-    "@angular/core": "^2.0.1",
-    "@angular/forms": "^2.0.1",
-    "@angular/http": "^2.0.1",
-    "@angular/platform-browser": "^2.0.1",
-    "@angular/platform-browser-dynamic": "^2.0.1",
-    "@angular/router": "^3.0.1",
+    "@angular/common": "^2.0.2",
+    "@angular/compiler": "^2.0.2",
+    "@angular/core": "^2.0.2",
+    "@angular/forms": "^2.0.2",
+    "@angular/http": "^2.0.2",
+    "@angular/platform-browser": "^2.0.2",
+    "@angular/platform-browser-dynamic": "^2.0.2",
+    "@angular/router": "^3.0.2",
     "core-js": "^2.4.1",
     "es-module-loader": "^1.0.0",
     "reflect-metadata": "^0.1.8",

src/client/app/about/about.component.html

@@ -1,9 +1,6 @@
-<p>
-  Angular 2 Seed is a starter project that implements best practices in
-  coding, building and testing Angular 2 apps.
-</p>
+<p i18n>Angular 2 Seed is a starter project that implements best practices in coding, building and testing Angular 2 apps.</p>
 
-<h2>Features</h2>
+<h2 i18n>Features</h2>
 <ul>
   <li>Ready to go, statically typed build system using Gulp for working with TypeScript.</li>
   <li>Production and development builds.</li>

src/client/app/app.component.e2e-spec.ts

@@ -17,7 +17,11 @@ describe('App', () => {
   });
 
   it('should have correct nav text for About', () => {
-    expect(element(by.css('sd-app sd-navbar nav a:last-child')).getText()).toEqual('ABOUT');
+    expect(element(by.css('sd-app sd-navbar nav a:nth-child(2)')).getText()).toEqual('ABOUT');
+  });
+
+  it('should have correct language text for Français', () => {
+    expect(element(by.css('sd-app sd-navbar nav a:last-child')).getText()).toEqual('FRANCAIS');
   });
 
 });

src/client/app/home/home.component.html

@@ -1,10 +1,8 @@
-<p>
-  Howdy! Here's a list of awesome computer scientists. Do you know any others? Add to the list yourself.
-</p>
+<p i18n>Howdy! Here's a list of awesome computer scientists. Do you know any others? Add to the list yourself.</p>
 
 <form (submit)="addName()">
   <input [(ngModel)]="newName" name="newName" placeholder="Awesome Computer Scientist">
-  <button type="submit">Add</button>
+  <button type="submit" i18n>Add</button>
 </form>
 
 <ul>

src/client/app/i18n.providers.ts

@@ -0,0 +1,26 @@
+import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
+
+export class TranslationProviders {
+
+  public getTranslationFile = (): Promise<any> => {
+    let noProviders: Object[] = [];
+    let locale: string = localStorage.getItem('lang') || 'en-US';
+    let file: string = `../assets/locale/messages.${locale}.xlf`;
+
+    if(!locale || locale === 'en-US') return Promise.resolve(noProviders);
+
+    return new Promise(function (resolve, reject) {
+      let xhr = new XMLHttpRequest;
+      xhr.open('GET', file);
+      xhr.onload = (data: any) => resolve(
+        [
+          { provide: TRANSLATIONS, useValue: data.target.response },
+          { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
+          { provide: LOCALE_ID, useValue: locale }
+        ]
+      );
+      xhr.onerror = () => reject(noProviders);
+      xhr.send();
+    });
+  }
+};

src/client/app/main.ts

@@ -5,14 +5,20 @@
 import { enableProdMode } from '@angular/core';
 // The browser platform with a compiler
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+// Load i18n providers
+import { TranslationProviders } from './i18n.providers';
 
 // The app module
 import { AppModule } from './app.module';
 
 if (String('<%= ENV %>') === 'prod') { enableProdMode(); }
 
-// Compile and launch the module
-platformBrowserDynamic().bootstrapModule(AppModule);
+// Compile and launch the module with i18n providers
+let TP = new TranslationProviders();
+TP.getTranslationFile().then((providers: any) => {
+  const options: any = { providers };
+  platformBrowserDynamic().bootstrapModule(AppModule, options);
+});
 
 // In order to start the Service Worker located at "./worker.js"
 // uncomment this line. More about Service Workers here

src/client/app/shared/navbar/navbar.component.css

@@ -15,6 +15,7 @@ nav a {
   margin-right: 20px;
   text-decoration: none;
   vertical-align: middle;
+  cursor: pointer;
 }
 
 nav a.router-link-active {

src/client/app/shared/navbar/navbar.component.html

@@ -1,4 +1,6 @@
 <nav>
-  <a [routerLink]="['/']" [routerLinkActive]="['router-link-active']" [routerLinkActiveOptions]="{exact:true}">HOME</a>
-  <a [routerLink]="['/about']" [routerLinkActive]="['router-link-active']" [routerLinkActiveOptions]="{exact:true}">ABOUT</a>
+  <a [routerLink]="['/']" [routerLinkActive]="['router-link-active']" [routerLinkActiveOptions]="{exact:true}" i18n>HOME</a>
+  <a [routerLink]="['/about']" [routerLinkActive]="['router-link-active']" [routerLinkActiveOptions]="{exact:true}" i18n>ABOUT</a>
+  <a (click)="selectLanguage('fr')" *ngIf="lang !== 'fr'">FRANCAIS</a>
+  <a (click)="selectLanguage('en-US')" *ngIf="lang !== 'en-US'">ENGLISH</a>
 </nav>

src/client/app/shared/navbar/navbar.component.ts

@@ -10,4 +10,13 @@ import { Component } from '@angular/core';
   styleUrls: ['navbar.component.css'],
 })
 
-export class NavbarComponent {}
+export class NavbarComponent {
+  public lang: string;
+  public constructor() {
+    this.lang = localStorage.getItem('lang') || 'en-US';
+  }
+  public selectLanguage = (lang: string): void => {
+    localStorage.setItem('lang', lang);
+    window.location.href = '/';
+  }
+}

src/client/app/system-config.ts

@@ -1,4 +1,3 @@
 declare var System: SystemJSLoader.System;
 
 System.config(JSON.parse('<%= SYSTEM_CONFIG_DEV %>'));
-

src/client/assets/locale/messages.fr.xlf

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="en" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="dcf8f15418a05a2f5b06cfe12eecbb46e94b13e1" datatype="html">
+        <source>HOME</source>
+        <target>ACCUEIL</target>
+      </trans-unit>
+      <trans-unit id="2ccc315673e88d7490220d465da566e3acff72d5" datatype="html">
+        <source>ABOUT</source>
+        <target>A PROPOS</target>
+      </trans-unit>
+      <trans-unit id="856523466ce29da19581906db092f9bcbe939362" datatype="html">
+        <source>Angular 2 Seed is a starter project that implements best practices in coding, building and testing Angular 2 apps.</source>
+        <target>Angular 2 Seed est un kit de démarrage qui implémente les bonnes pratiques, la compilation et le testing des application Angular 2.</target>
+      </trans-unit>
+      <trans-unit id="6cdb1fea93d77c07950c0c76c6e0ad79ebbef084" datatype="html">
+        <source>Features</source>
+        <target>Inclus</target>
+      </trans-unit>
+      <trans-unit id="fb798124b25a52ab081695795ca745abb52f8e95" datatype="html">
+        <source>Howdy! Here&apos;s a list of awesome computer scientists. Do you know any others? Add to the list yourself.</source>
+        <target>Hello! Voici une liste d'informaticiens connus. Tu en connais d'autres? ajoute-les à la liste.</target>
+      </trans-unit>
+      <trans-unit id="f6755cff4957d5c3c89bafce5651f1b6fa2b1fd9" datatype="html">
+        <source>Add</source>
+        <target>Ajouter</target>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

tools/manual_typings/seed/del.d.ts

@@ -0,0 +1,9 @@
+declare module 'del' {
+  var del: IDel;
+  export = del;
+  interface IDel {
+    sync: {
+      (patterns: any): void;
+    };
+  }
+}

tools/tasks/seed/app.through.ts

@@ -0,0 +1 @@
+import '../../../src/client/app/main';

tools/tasks/seed/clear.files.ts

@@ -0,0 +1,22 @@
+import * as del from 'del';
+import { join } from 'path';
+
+import Config from '../../config';
+
+/**
+ * Removes all the js, js.map and metadata.json from the src and tools directories
+ */
+export = () => {
+  let source = [
+    'gulpfile.js',
+    'gulpfile.js.map',
+    join(Config.TOOLS_DIR, '**/*.js'),
+    join(Config.TOOLS_DIR, '**/*.js.map'),
+    join(Config.TOOLS_DIR, '**/*.metadata.json'),
+    join(Config.APP_SRC, '**/*.js'),
+    join(Config.APP_SRC, '**/*.js.map'),
+    join(Config.APP_SRC, '**/*.metadata.json')
+  ];
+
+  return del.sync(source);
+};