ng2-übersetzen funktioniert nicht im lazy-Modul geladen

Ich bin mit der ng2-übersetzen für den Umgang mit Sprache in eine Eckige 2 RC5 app, die ich erschaffe. Die app hat zwei feature-Module, ein lazy geladen und eine eifrig geladen. TranslateModule zur Verfügung gestellt wird, über eine gemeinsame Modul. Das problem ist, dass die übersetzen Rohr funktioniert gut in der eager-Modul geladen, aber nicht faul-eins geladen. Um zu überprüfen, es hat zu tun mit der be-Methode, die ich konvertiert sowohl eager-loading und alles hat gut funktioniert.

Ein-plunk, das veranschaulicht das Problem kann hier gefunden werden: Plunker Der wesentliche code ist unten, wie gut.

Die erste Seite ist, die darauf geladen, deshalb, warum die Saiten gut Aussehen. Klicken Sie auf Login und es geht an die faul-eins geladen wo alle Zeichenfolgen in Großbuchstaben, d.h. nicht übersetzt.

Jede mögliche Hilfe würde geschätzt.

app.Modul:

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.Komponente:

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

geteilt.Modul:

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

willkommen.Modul (eager geladen)

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

willkommen.Komponente:

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

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

willkommen.routing

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

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

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

backend.Modul (lazy geladen)

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.Komponente:

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"
}
InformationsquelleAutor Jason | 2016-08-17
Schreibe einen Kommentar