使用 Angular Universal 进行 Ngx 翻译答案

【问题标题】：Ngx-translate with Angular Universal使用 Angular Universal 进行 Ngx 翻译
【发布时间】：2017-07-26 22:56:23
【问题描述】：

我刚刚在我的 Angular 2 通用应用程序中从 ng2-translate (v. 5.x.x) 升级到 ngx-translate (v. 6.x.x)。

在升级之前我使用的是这个加载器 (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();
    });
  }
}

我是这样使用的：

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

然而，升级到ngx-translate 后，我在终端控制台中收到此错误（因此，服务器端错误）：

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'.

那么任何人都知道如何使用 Angular Universal 和 ngx-translate 设置自定义加载程序以支持服务器端支持？

【问题讨论】：

标签： angular angular2-universal ngx-translate

【解决方案1】：

解决方案比预期的要容易得多，migration guide 中有详细说明。

在6.x.x 中，破坏代码的更改是传递给forRoot() 的预期值。

现在我们需要将加载器作为loader 键的对象传递，如下所示：

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

【讨论】：