Ngx-translate with Angular Universal

Question

I just upgraded from ng2-translate (v. 5.x.x) to ngx-translate (v. 6.x.x) in my Angular 2 Universal App.

Before the upgrade I was using this loader (found here):

class TranslateUniversalLoader implements TranslateLoader {
  public getTranslation(lang: string): Observable<any> {
    return Observable.create(observer => {
      observer.next(JSON.parse(fs.readFileSync(`src/i18n/${lang}.json`, 'utf8')));
      observer.complete();
    });
  }
}

That I was using like so:

@NgModule({
  bootstrap: [AppComponent],
  declarations: [ AppComponent ],
  imports: [
    FormsModule,
    CoreModule,
    ViewsModule,
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useClass: TranslateUniversalLoader,
    }),
    UniversalModule
  ]
})

After upgrading to ngx-translate, however, I get this error in the terminal console (thus, server-side error):

Module build failed: Error: /src/app/app.node.module.ts (65,7): 
Argument of type '{ provide: typeof TranslateLoader; useClass: typeof TranslateUniversalLoader; }' is not assignable to parameter of type 'TranslateModuleConfig'.

So anyone knows how to set up a custom loader for server side support with Angular Universal with ngx-translate?

Answer 1

The solution was way easier than expected and detailed in the migration guide.

In 6.x.x what is changed that was breaking the code is the expected value passed to forRoot().

Now we need to pass the loader as an object of the loader key, like so:

TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useClass: TranslateUniversalLoader,
  }
}),