title: ng2-translate not working in lazy-loaded module
body: <p>I'm using ng2-translate for language handling in an Angular 2 RC5 app I'm creating. The app has two feature modules, one lazy loaded and one eager loaded. TranslateModule is made available through a shared module. The problem is that the translate pipe works fine in the eager-loaded module but not the lazy-loaded one. To verify it has to do with the loading method I converted both to eager-loading and everything worked fine.</p>
  
  <p>A plunk that demonstrates the issue can be found here: <a href="http://plnkr.co/edit/81Jsmy?p=preview" rel="noreferrer">Plunker</a> The significant code is below as well.</p>
  
  <p>The initial page is the eager-loaded one, hence why the strings look fine. Click Login and it will go to the lazy-loaded one where all strings are upper-case, i.e. not translated.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>app.module:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>app.routing:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>app.component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { TranslateService } from 'ng2-translate/ng2-translate';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
      `
  })
  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');
      }
  }
  </code></pre>
  
  <p>shared.module:</p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>welcome.module (eager loaded)</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>welcome.component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      template: `
          &lt;h2&gt;{{ 'PLEASELOGIN' | translate }}&lt;/h2&gt;
          &lt;nav&gt;&lt;a routerLink="/backend"&gt;{{ 'LOGIN' | translate }}&lt;/a&gt;&lt;/nav&gt;
      `
  })
  export class WelcomeComponent { }
  </code></pre>
  
  <p>welcome.routing</p>
  
  <pre><code>import { RouterModule }  from '@angular/router';
  
  import { WelcomeComponent } from './welcome.component';
  
  export const routing = RouterModule.forChild([
      { path: 'welcome', component: WelcomeComponent}
  ]);
  </code></pre>
  
  <p>backend.module (lazy loaded)</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>backend.component:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      template: `
          &lt;h2&gt;{{ 'WELCOME' | translate }}&lt;/h2&gt;
          &lt;nav&gt;&lt;a routerLink="/welcome"&gt;{{ 'LOGOUT' | translate }}&lt;/a&gt;&lt;/nav&gt;
      `
  })
  export class BackendComponent { }
  </code></pre>
  
  <p>backend.routing</p>
  
  <pre><code>import { Routes, RouterModule }  from '@angular/router';
  import { BackendComponent }    from './backend.component';
  
  const routes: Routes = [
      { path: '', component: BackendComponent }
  ];
  
  export const routing = RouterModule.forChild(routes);
  </code></pre>
  
  <p>en.json</p>
  
  <pre><code>{
      "LOGIN": "Login",
      "LOGOUT": "Logout",
      "WELCOME": "Welcome!",
      "PLEASELOGIN": "Please Login"
  }
  </code></pre>