NG2 translation doesn't work in lazy module

Question

I am using ng2-translate to process the language in the Angular 2 RC5 application that I am creating. The application has two functional modules: one lazy and one loaded. TranslateModule is provided through a common module. The problem is that the transfer pipe works fine in a loaded module, but not in a lazy one. To make sure that this is due to the boot method, I converted both the download boot, and everything worked fine.

The plunger demonstrating the problem can be found here: Plunker The significant code is also below.

The start page is loaded, so the lines look great. Click "Login" and it will go to lazy loading, where all lines are uppercase, i.e. Not translated.

Any help would be appreciated.

app.module:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { TranslateModule } from 'ng2-translate/ng2-translate'; import { AppComponent } from './app.component'; import { WelcomeModule } from './welcome/welcome.module'; import { routing } from './app.routing'; @NgModule({ imports: [ BrowserModule, WelcomeModule, TranslateModule.forRoot(), routing ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

app.routing:

 import { Routes, RouterModule } from '@angular/router'; export const routes: Routes = [ { path: '', redirectTo: 'welcome', pathMatch: 'full'}, { path: 'backend', loadChildren: 'app/backend/backend.module' } ]; export const routing = RouterModule.forRoot(routes); 

app.component:

 import { Component } from '@angular/core'; import { TranslateService } from 'ng2-translate/ng2-translate'; @Component({ selector: 'my-app', template: ` <router-outlet></router-outlet> ` }) export class AppComponent { constructor(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'); } } 

shared.module:

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpModule } from '@angular/http'; import { TranslateModule } from 'ng2-translate/ng2-translate'; @NgModule({ imports: [ CommonModule, HttpModule, TranslateModule.forRoot() ], exports: [ CommonModule, TranslateModule ], }) export class SharedModule {} 

welcome.module (loaded)

 import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { WelcomeComponent } from './welcome.component'; import { routing } from './welcome.routing'; @NgModule({ imports: [ SharedModule, routing ], declarations: [ WelcomeComponent ] }) export class WelcomeModule { } 

welcome.component:

 import { Component } from '@angular/core'; @Component({ template: ` <h2>{{ 'PLEASELOGIN' | translate }}</h2> <nav><a routerLink="/backend">{{ 'LOGIN' | translate }}</a></nav> ` }) export class WelcomeComponent { } 

welcome.routing

 import { RouterModule } from '@angular/router'; import { WelcomeComponent } from './welcome.component'; export const routing = RouterModule.forChild([ { path: 'welcome', component: WelcomeComponent} ]); 

backend.module (lazy loaded)

 import { NgModule } from '@angular/core'; import { SharedModule } from '../shared/shared.module'; import { BackendComponent } from './backend.component'; import { routing } from './backend.routing'; @NgModule({ imports: [ SharedModule, routing ], declarations: [ BackendComponent ] }) export default class BackendModule { } 

backend.component:

 import { Component } from '@angular/core'; @Component({ template: ` <h2>{{ 'WELCOME' | translate }}</h2> <nav><a routerLink="/welcome">{{ 'LOGOUT' | translate }}</a></nav> ` }) export class BackendComponent { } 

backend.routing

 import { Routes, RouterModule } from '@angular/router'; import { BackendComponent } from './backend.component'; const routes: Routes = [ { path: '', component: BackendComponent } ]; export const routing = RouterModule.forChild(routes); 

en.json

 { "LOGIN": "Login", "LOGOUT": "Logout", "WELCOME": "Welcome!", "PLEASELOGIN": "Please Login" } 

Answer 1

I had the same problem. Adding TranslateLoader and TranslateService to the forRoot method solves the problem.

  import {TranslateModule, TranslateService, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate'; @NgModule({ imports: [..,TranslateModule], declarations: [..], exports: [ .., TranslateModule] }) export class SharedModule { static forRoot(): ModuleWithProviders { function translateLoader(http: Http) { return new TranslateStaticLoader(http, 'i18n', '.json'); } return { ngModule: SharedModule, providers: [UserService, ItemService, { provide: TranslateLoader, useFactory: translateLoader, deps: [Http] }, TranslateService], }; } } 

Answer 2

Although the accepted answer pointed me in the right direction, the translator did not work in a lazy loaded module. He worked in other modules.

I had to re-enter TranslatorService in the main component of the lazy loadable module and run the language settings, as it was in app.component.ts

 export class MainComponentOfLazyLoadedModule implements OnInit { constructor(private translate: TranslateService) { Language.currentLang = "en"; translate.addLangs(["en", "sp"]); translate.setDefaultLang(Language.currentLang); translate.use(Language.currentLang); } ngOnInit() { } }