ng2-translate nie działa w module Lazy-Load

Question

Używam ng2-translate do obsługi języka w aplikacji Angular 2 RC5, którą tworzę. Aplikacja ma dwa moduły funkcyjne, jeden załadowany i załadowany. Moduł TranslateModule jest udostępniany za pośrednictwem wspólnego modułu. Problem polega na tym, że rura translate działa dobrze w module ładowanym, ale nie w trybie leniwym. Aby sprawdzić, czy ma to związek z metodą ładowania, przekonwertowałem ją na ładowanie i wszystko działało dobrze.

Pijak demonstrujący problem można znaleźć tutaj: Plunker Znaczący kod znajduje się poniżej.

Strona początkowa jest mocno obciążona, dlatego też napisy wyglądają dobrze. Kliknij przycisk Zaloguj się, aby przejść do trybu "Lazy-Load", w którym wszystkie łańcuchy są pisane wielkimi literami, tzn. Nie są tłumaczone.

Każda pomoc zostanie doceniona.

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 (załadowany w)

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 (leniwa załadowany)

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.com składową:

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

miałem ten sam problem. Dodanie funkcji TranslateLoader i TranslateService do metody forRoot rozwiązało problem.

Answer 2

Chociaż zaakceptowana odpowiedź wskazała mi właściwy kierunek, tłumacz nie działał w leniwym załadowanym module. W innych modułach działał.

musiałem ponownie wstrzyknąć TranslatorService główny składnik w leniwy ładowanego modułu i init ustawień językowych jak robiłem w 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() { 

    } 

}