i18n

Author: roman

karma.conf.ts

@@ -11,6 +11,7 @@ export = (config: any) => {
 
     karma.set({
         files: [
+            { pattern: 'src/i18n/*.json', included: false },
             { pattern: 'build/libs.js', watched: false },
             { pattern: 'src/spec.module.js' },
         ],
@@ -25,6 +26,9 @@ export = (config: any) => {
     });
 
     config.set({
+        proxies: {
+            '/i18n': '/base/src/i18n',
+        },
         mime: {
             'text/x-typescript': ['ts', 'tsx'],
         },

package.json

@@ -48,6 +48,8 @@
     "@angular/platform-browser": "4.0.1",
     "@angular/platform-browser-dynamic": "4.0.1",
     "@angular/router": "4.0.1",
+    "@ngx-translate/core": "6.0.1",
+    "@ngx-translate/http-loader": "0.0.3",
     "core-js": "2.4.1",
     "rxjs": "5.3.0",
     "tslib": "1.6.0",

src/app/app.component.spec.ts

@@ -1,25 +1,30 @@
 import { AppComponent } from './app.component';
-import { TestBed } from '@angular/core/testing';
+import { TestBed, ComponentFixture, async } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { AppModule } from './app.module';
 
 describe('App component:', () => {
 
-    beforeEach(() => {
+    let component: AppComponent;
+    let fixture: ComponentFixture<AppComponent>;
+
+    beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [AppModule],
             schemas: [NO_ERRORS_SCHEMA]
-        });
-    });
-
-    let component: AppComponent;
+        })
+            .compileComponents()
+            .then(() => {
+                fixture = TestBed.createComponent(AppComponent);
+                component = fixture.componentInstance;
+            });
+    }));
 
     it('smoke', () => {
-        expect(AppComponent).toBeDefined();
+        expect(component).toBeDefined();
     });
 
-    it('instance', () => {
-        component = new AppComponent();
+    it('title property', () => {
         expect(component.title).toBe('App');
     });
 });

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'app',
@@ -11,5 +12,11 @@ import { Component } from '@angular/core';
     styleUrls: ['app.component.scss'],
 })
 export class AppComponent {
+
     title = 'App';
+
+    constructor(translate: TranslateService) {
+        translate.setDefaultLang('en');
+        translate.use('en');
+    }
 }

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms';
 import { AppErrorHandler } from './app.errorhandler';
 import { WelcomeComponent } from './welcome/welcome.component';
 import { HomeComponent } from './home/home.component';
+import { TranslationModule } from './translation.module';
 
 const routes: Routes = [
     { path: '', component: HomeComponent },
@@ -18,7 +19,8 @@ const routes: Routes = [
     imports: [
         BrowserModule,
         FormsModule,
-        RouterModule.forRoot(routes)
+        RouterModule.forRoot(routes),
+        TranslationModule,
     ],
     declarations: [
         AppComponent,

src/app/translation.module.ts

@@ -0,0 +1,25 @@
+import { Http, HttpModule } from '@angular/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+// AoT requires an exported function for factories.
+export function createTranslateLoader(http: Http): TranslateHttpLoader {
+    return new TranslateHttpLoader(http, 'i18n/', '.json');
+}
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        HttpModule,
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: createTranslateLoader,
+                deps: [Http]
+            }
+        })
+    ]
+})
+export class TranslationModule { }

src/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "HELLO": "hello {{value}}"
+}

webpack.config.ts

@@ -105,7 +105,7 @@ export = (options: Options = {}) => {
             https: true,
             overlay: true,
             noInfo: false,
-            contentBase: [buildPath],
+            contentBase: [buildPath, sourcePath],
             port: 8087,
             historyApiFallback: true,
             hot: true,