Angular ng2-translate doesn't work in a child component of root component

Question

I have decided to use ng2-translate library for application internationalization as it seems better that default implementation. But I have faced the following problems.

Here is my code:

app.module.ts:

import { TranslateModule } from 'ng2-translate';
@NgModule({
imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot(),
    appRoutes
],

app.component.ts

   @Component({
 selector: 'fiv-app',
 templateUrl: './app.fivtemplate.html',
 providers: [TranslateService]
   })
  .....
 constructor(private _translateService: TranslateService) {
      this.langs= ['fi','en'];
     _translateService.addLangs(["en", "fi"]);
     _translateService.setDefaultLang('fi');
     let browserLang = _translateService.getBrowserLang();
      _translateService.use('fi');
   }
   .....

app.component.html

 <fiv-hello></fiv-hello>
<h2>{{ 'HOME.TITLE' | translate }}</h2>

and fivhello.component.ts

<h2>{{ 'HOME.TITLE' | translate }}</h2>
<div [translate]="'HOME.TITLE'"> Test</div>

1. I tried to use the latest version, 5.0.0 but I get this error:

Uncaught TypeError: ctorParameters.map is not a function at ReflectionCapabilities.parameters (http://localhost:4200/main.bundle.js:40295:47)

I am using angular-cli , angular 2.0.0 and npm So I switched to 4.2.0 which seems to be working fine with my configuration.

2. The text from app.component.html is translated. But the one from fivhello component is not localized. It just display HOME.TITLE. When debugging I noticed that the get function from TranslateService is invoked later, after rendering, but I would expect the text to be updated.

3. After changing the language to use, the dom also is not updated. The component that is used to change language is the following:

   @Component({
       selector: 'language-option',
       templateUrl: './languageoption.component.html',
       styleUrls: ['./languageoption.component.css'],
       providers: [ TranslateService ]
     })
   export class LanguageoptionComponent implements OnInit {
     langs : String [];
   
    constructor(private _translateService: TranslateService) {
      this.langs = ['fi', 'en'];
    }
   
     ngOnInit() {
     }
   
     public changeLocale = (locale) => {
         this._translateService.use(locale);     
      }
   
     }
   

   Has anyone met the same problems?

Thanks.

Answer 1

You should add in child module: TranslateModule.forChild({....})

Answer 2

By updating to latest version of angular and angular-cli I manged to get rid of error for 5.0.0 version. So I can use it.

The fix for the ohter 2 problems was something related to how angular is working and singleton services.

I have added TranslateService to the provider of root component where I configured it. But I also added in child component and the external component that changes the language. And seems that they create different instance of this service, of course not being configured. By simply removing it from the provider list of other components was enough for both problems to be solved.