Merge pull request #1442 from ruffiem/master

feat(i18n): angular i18n native implementation

Author: mgechev

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",
     "lint": "gulp tslint",
     "karma": "karma",
     "karma.start": "karma start",
@@ -72,6 +73,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",

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

@@ -1,7 +1,4 @@
-<p>
-  Angular 2 Seed is a starter project that implements best practices in
-  coding, building and testing Angular 2 apps.
-</p>
+<p>Angular 2 Seed is a starter project that implements best practices in coding, building and testing Angular 2 apps.</p>
 
 <h2>Features</h2>
 <ul>

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

@@ -17,7 +17,7 @@ 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');
   });
 
 });

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

@@ -1,6 +1,4 @@
-<p>
-  Howdy! Here's a list of awesome computer scientists. Do you know any others? Add to the list yourself.
-</p>
+<p>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">

src/client/app/i18n.providers.ts

@@ -0,0 +1,30 @@
+import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';
+
+export class TranslationProviders {
+
+  public getTranslationFile = (): Promise<any> => {
+    let noProviders: Object[] = [];
+
+    // Define a way to retrieve the local information
+    let locale: string = 'en-US';
+
+    // Set the directory to the translation files
+    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,22 +5,17 @@
 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);
-
-// In order to start the Service Worker located at "./worker.js"
-// uncomment this line. More about Service Workers here
-// https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
-//
-// if ('serviceWorker' in navigator) {
-//   (<any>navigator).serviceWorker.register('./worker.js').then((registration: any) =>
-//       console.log('ServiceWorker registration successful with scope: ', registration.scope))
-//     .catch((err: any) =>
-//       console.log('ServiceWorker registration failed: ', err));
-// }
+// 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*/);
+// });

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.ts

@@ -10,4 +10,4 @@ import { Component } from '@angular/core';
   styleUrls: ['navbar.component.css'],
 })
 
-export class NavbarComponent {}
+export class NavbarComponent { }

src/client/app/system-config.ts

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

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);
+};

tools/tasks/seed/compile.ahead.prod.ts

@@ -28,6 +28,14 @@ export = (done: any) => {
     return JSON.stringify(parsed, null, 2);
   });
   const args = argv;
+
+  // If a translation, tell the compiler
+  if(args.lang) {
+    args['i18nFile'] = `./src/client/assets/locale/messages.${args.lang}.xlf`;
+    args['locale'] = args.lang;
+    args['i18nFormat'] = 'xlf';
+  }
+
   const cliOptions = new tsc.NgcCliOptions(args);
   tsc.main(join(Config.TMP_DIR, Config.BOOTSTRAP_DIR), cliOptions, codegen)
     .then(done)
@@ -37,4 +45,3 @@ export = (done: any) => {
       process.exit(1);
     });
 };
-