angular - 遅延ロードされたモジュールでng2-translateが機能しない

Question

私が作成している Angular 2 RC5 アプリでの言語処理に ng2-translate を使用しています。アプリには 2 つの機能モジュールがあり、1 つは遅延ロードされ、もう 1 つは熱心にロードされます。TranslateModule は、共有モジュールを通じて利用可能になります。問題は、翻訳パイプが熱心にロードされたモジュールでは正常に機能するが、遅延ロードされたモジュールでは機能しないことです。それが読み込み方法に関係していることを確認するために、私は両方を熱心な読み込みに変換し、すべてが正常に機能しました。

この問題を示す plunk は次の場所にあります: Plunker重要なコードも以下に示します。

最初のページは熱心に読み込まれたページであるため、文字列がきれいに見える理由です。[ログイン] をクリックすると、すべての文字列が大文字である、つまり翻訳されていない、遅延ロードされたものに移動します。

どんな助けでも大歓迎です。

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');
    }
}

共有モジュール:

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 (イーガーロード)

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 { }

ようこそ.コンポーネント:

import { Component } from '@angular/core';

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

ようこそ。ルーティング

import { RouterModule }  from '@angular/router';

import { WelcomeComponent } from './welcome.component';

export const routing = RouterModule.forChild([
    { path: 'welcome', component: WelcomeComponent}
]);

backend.module (遅延ロード)

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"
}