<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>NGX-Translate Demo</title>
    <script src="https://unpkg.com/zone.js@0.6.21/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>
### NGX-Translate - http://www.ngx-translate.com/

The internationalization (i18n) library for Angular
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    'app': "./src",
    '@ngx-translate/core': 'npm:@ngx-translate/core/bundles/core.umd.js',
    '@ngx-translate/http-loader': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.10/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './bootstrap.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});
{
    "TITLE": "Hello Angular with ngx-translate!",
    "SELECT": "Change language",
    "LAZY": "Go To Lazy Loaded Module"
}
{
  "HOME": {
    "TITLE": "Bonjour Angular avec ngx-translate !",
    "SELECT": "Changer la langue"
  }
}
import {HttpModule, Http} from "@angular/http";
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {AppComponent} from "./app.component";
import { RouterModule, Routes } from '@angular/router';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, "i18n/", ".json");
}

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([{
              path: 'lazy',             
              loadChildren: 'src/lazy.module#LazyModule'              
        }]),
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [Http]
          }
        })
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'my-app',
    template: `
    <div>
      <h2>{{ 'TITLE' | translate }}</h2>
      <a routerLink="lazy">{{ 'LAZY' | translate }}</a>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        
        translate.setDefaultLang('en');
;
    }
}
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
import {HttpModule, Http} from "@angular/http";
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {TranslateModule, TranslateLoader} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import { LazyComponent } from './lazy.component';
import { AdditionalComponent } from './additional.component';
import { RouterModule, Routes } from '@angular/router';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, "i18n/", "-lazy.json");
}

@NgModule({
    imports: [
        HttpModule,
        RouterModule.forChild([{
          path: '',
          component: LazyComponent,
          children: [
             {
                path: 'add',
                component: AdditionalComponent
              }
            ]
        },
       ]),
        TranslateModule.forChild({
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [Http]
          }
        })
    ],
    declarations: [
      LazyComponent,
      AdditionalComponent
    ]
})
export class LazyModule {
}
{
    "TEST": "This has been added by the lazy loaded module"
}
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
    selector: 'lazy',
    template: `
    <div>
      <h2>Lazy</h2>
      <label>
        {{ 'TEST' | translate }}
      </label>
      <br>
      <a routerLink="add">Go To Component with additional translations</a>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class LazyComponent {
    constructor(private translate: TranslateService) {
      this.translate.getTranslation("en");
    }
}
{
  "ADD": "This translation has been added"
}
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {Http} from "@angular/http";

@Component({
    selector: 'additional',
    template: `
    <div>
      <h2>Additional</h2>
      <label>
        {{ add }}
      
      </label>
      <br>
      <label>
      {{ title }}
      </label>
      <br>
      <label>
      {{ lazy }}
      </label>
    </div>
  `,
})
export class AdditionalComponent {
    add: string = "test";
    title: string = "title";
    lazy: string = "lazy";
    
    constructor(private translate: TranslateService, private http: Http) {
         }
         
    ngOnInit(){
      this.http.get("i18n/en-additional.json")
        .map(res => res.json())
        .subscribe(res => { 
          this.translate.setTranslation("en", res, true);
          this.translate.get("ADD")
            .subscribe(res => {
              this.add = res;
              console.log(res);
              });
          this.translate.get("TITLE")
            .subscribe(res => {
              this.title = res;
              console.log(res);
              });
          this.translate.get("TEST")
            .subscribe(res => {
              this.lazy = res;
              console.log(res);
              });
        });
    }
}