ng2-अनुवाद आलसी लोडेड मॉड्यूल में काम नहीं कर रहा है

Question

मैं एक कोणीय 2 आरसी 5 ऐप में भाषा प्रबंधन के लिए एनजी 2-अनुवाद का उपयोग कर रहा हूं। ऐप में दो फीचर मॉड्यूल हैं, एक आलसी लोड और एक उत्सुक भारित है। अनुवाद मॉड्यूल एक साझा मॉड्यूल के माध्यम से उपलब्ध कराया गया है। समस्या यह है कि अनुवाद पाइप उत्सुक लोड मॉड्यूल में ठीक काम करता है लेकिन आलसी लोड नहीं होता है। इसे सत्यापित करने के लिए इसे लोडिंग विधि के साथ करना है जिसे मैंने उत्सुक लोडिंग में परिवर्तित किया है और सबकुछ ठीक काम करता है।

इस मुद्दे को प्रदर्शित करने वाला एक प्लंक यहां पाया जा सकता है: 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'); 
    } 
} 

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 (उत्सुक लोड)

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 (आलसी लोड)

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 ponent:

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

मैं एक ही समस्या थी। ForRoot विधि में TranslateLoader और TranslateService को जोड़ने से समस्या हल हो गई।

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

हालांकि स्वीकृत उत्तर ने मुझे सही दिशा में इंगित किया, अनुवादक आलसी लोड मॉड्यूल में काम नहीं कर रहा था। अन्य मॉड्यूल में यह काम कर रहा था।

मैं आलसी लोड मॉड्यूल के मुख्य घटक में फिर से TranslatorService इंजेक्षन करना पड़ा और भाषा सेटिंग्स init जैसे मैं 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() { 

    } 

}