Merge pull request #9 from wwelling/i18n-translate

I18n translate: this connects to #3

package.json

@@ -53,6 +53,7 @@
     "js.clone": "0.0.3",
     "methods": "~1.1.2",
     "morgan": "^1.7.0",
+    "ng2-translate": "~4.0.1",
     "preboot": "~4.5.2",
     "rxjs": "5.0.0-beta.12",
     "webfontloader": "^1.6.26",
@@ -77,6 +78,7 @@
     "awesome-typescript-loader": "^2.2.4",
     "codelyzer": "1.0.0-beta.3",
     "cookie-parser": "^1.4.3",
+    "copy-webpack-plugin": "~4.0.1",
     "express-interceptor": "^1.2.0",
     "iltorb": "^1.0.13",
     "imports-loader": "^0.6.5",

resources/i18n/en.json

@@ -0,0 +1,13 @@
+{
+  "title": "DSpace Universal",
+
+  "nav": {
+    "home": "Home"
+  },
+
+  "example": {
+    "with": {
+      "data": "{{greeting}}, {{recipient}}!"
+    }
+  }
+}

src/app/app.component.html

@@ -1,9 +1,11 @@
-<h3>DSpace</h3>
+<h3>{{ 'title' | translate }}</h3>
 <nav>
-  <a routerLinkActive="router-link-active" routerLink="home">Home</a>
+  <a routerLinkActive="router-link-active" routerLink="home">{{ 'nav.home' | translate }}</a>
 </nav>
 <div class="container-fluid">
   <main>
+    <p>{{ 'example.with.data' | translate:data }}</p>
+    <p>{{ example }}</p>
     <router-outlet></router-outlet>
   </main>
 </div>

src/app/app.component.ts

@@ -1,11 +1,42 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+
+import { TranslateService } from 'ng2-translate';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   selector: 'ds-app',
   templateUrl: './app.component.html',
-  styleUrls: [ './app.component.scss' ]
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnDestroy, OnInit {
+
+  example: string;
+
+  data: any = {
+    greeting: 'Hello',
+    recipient: 'World'
+  }
+
+  private registerSubscription: any;
+
+  constructor(public translate: TranslateService) {
+    // this language will be used as a fallback when a translation isn't found in the current language
+    translate.setDefaultLang('en');
+    // the lang to use, if the lang isn't available, it will use the current loader to get them
+    translate.use('en');
+  }
+
+  ngOnInit() {
+    this.registerSubscription = this.translate.get('example.with.data', { greeting: 'Hello', recipient: 'DSpace' }).subscribe((translation: string) => {
+      this.example = translation;
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.registerSubscription) {
+      this.registerSubscription.unsubscribe();
+    }
+  }
+
 }

src/app/shared/shared.module.ts

@@ -2,6 +2,9 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { TranslateModule } from 'ng2-translate/ng2-translate';
+
 import { ApiService } from './api.service';
 import { ModelService } from './model/model.service';
 
@@ -9,6 +12,7 @@ const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
   CommonModule,
   RouterModule,
+  TranslateModule,
   FormsModule,
   ReactiveFormsModule
 ];

src/browser.module.ts

@@ -1,9 +1,12 @@
 import { NgModule } from '@angular/core';
+import { Http } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { UniversalModule, isBrowser, isNode, AUTO_PREBOOT } from 'angular2-universal/browser'; // for AoT we need to manually split universal packages
 import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload';
 
+import { TranslateLoader, TranslateModule, TranslateStaticLoader } from 'ng2-translate';
+
 import { AppModule, AppComponent } from './app/app.module';
 import { SharedModule } from './app/shared/shared.module';
 import { CacheService } from './app/shared/cache.service';
@@ -14,6 +17,10 @@ import { Meta } from './angular2-meta';
 
 // import * as LRU from 'modern-lru';
 
+export function createTranslateLoader(http: Http) {
+  return new TranslateStaticLoader(http, './assets/i18n', '.json');
+}
+
 export function getLRU(lru?: any) {
   // use LRU for node
   // return lru || new LRU(10);
@@ -33,9 +40,14 @@ export function getResponse() {
 export const UNIVERSAL_KEY = 'UNIVERSAL_CACHE';
 
 @NgModule({
-  bootstrap: [ AppComponent ],
+  bootstrap: [AppComponent],
   imports: [
-    // MaterialModule.forRoot() should be included first
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: (createTranslateLoader),
+      deps: [Http]
+    }),
+
     UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
 
     FormsModule,

src/node.module.ts

@@ -1,8 +1,11 @@
 import { NgModule } from '@angular/core';
+import { Http } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { UniversalModule, isBrowser, isNode } from 'angular2-universal/node'; // for AoT we need to manually split universal packages
 
+import { TranslateLoader, TranslateModule, TranslateStaticLoader } from 'ng2-translate';
+
 import { AppModule, AppComponent } from './app/app.module';
 import { SharedModule } from './app/shared/shared.module';
 import { CacheService } from './app/shared/cache.service';
@@ -11,6 +14,10 @@ import { CacheService } from './app/shared/cache.service';
 // see https://github.com/angular/angular/pull/12322
 import { Meta } from './angular2-meta';
 
+export function createTranslateLoader(http: Http) {
+  return new TranslateStaticLoader(http, './assets/i18n', '.json');
+}
+
 export function getLRU() {
   return new Map();
 }
@@ -25,9 +32,14 @@ export function getResponse() {
 export const UNIVERSAL_KEY = 'UNIVERSAL_CACHE';
 
 @NgModule({
-  bootstrap: [ AppComponent ],
+  bootstrap: [AppComponent],
   imports: [
-    // MaterialModule.forRoot() should be included first
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: (createTranslateLoader),
+      deps: [Http]
+    }),
+
     UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
 
     FormsModule,
@@ -63,9 +75,9 @@ export class MainModule {
     universalCache[CacheService.KEY] = JSON.stringify(this.cache.dehydrate());
   }
 
- /**
-  * Clear the cache after it's rendered
-  */
+  /**
+   * Clear the cache after it's rendered
+   */
   universalAfterDehydrate = () => {
     // comment out if LRU provided at platform level to be shared between each user
     this.cache.clear();

webpack.config.ts

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var path = require('path');
 var clone = require('js.clone');
 var webpackMerge = require('webpack-merge');
+let CopyWebpackPlugin = require('copy-webpack-plugin');
 
 export var commonPlugins = [
   new webpack.ContextReplacementPlugin(
@@ -13,6 +14,11 @@ export var commonPlugins = [
     }
   ),
 
+  new CopyWebpackPlugin([{
+    from: path.join(__dirname, 'resources', 'i18n'),
+    to: path.join('assets', 'i18n')
+  }]),
+
   // Loader options
   new webpack.LoaderOptionsPlugin({
 
@@ -24,7 +30,7 @@ export var commonConfig = {
   devtool: 'source-map',
   resolve: {
     extensions: ['.ts', '.js', '.json'],
-    modules: [ root('node_modules') ]
+    modules: [root('node_modules')]
   },
   context: __dirname,
   output: {
@@ -34,10 +40,10 @@ export var commonConfig = {
   module: {
     rules: [
       // TypeScript
-      { test: /\.ts$/,   use: ['awesome-typescript-loader', 'angular2-template-loader'] },
+      { test: /\.ts$/, use: ['awesome-typescript-loader', 'angular2-template-loader'] },
       { test: /\.html$/, use: 'raw-loader' },
-      { test: /\.css$/,  use: 'raw-loader' },
-      { test: /\.scss$/,  use: ['raw-loader', 'sass-loader'] },
+      { test: /\.css$/, use: 'raw-loader' },
+      { test: /\.scss$/, use: ['raw-loader', 'sass-loader'] },
       { test: /\.json$/, use: 'json-loader' }
     ],
   },