ngx-translate 和 Angular Universal：找不到客户端翻译

Question

自从半天以来，我尝试将 ngx-translate 与 Angular 通用入门应用程序 https://github.com/angular/universal-starter 一起使用，但没有成功。有人知道为什么跟随不起作用？

当我启动 npm start 我的服务器并重新加载我的页面时，我简要地看到在被替换为 key 之前找到了翻译，这通常表明某些东西不适用于 ngx-translate。另外，当我在server-app.module.ts 中更改翻译路径时，我在服务器的控制台中看到一个错误，因此我认为我的服务器部分没问题，问题来自客户端。

app.module.ts:

 export function exportTranslateStaticLoader(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
 }

 imports: [
    TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: exportTranslateStaticLoader,
      deps: [Http]
    }
  }
  )
]

浏览器应用程序.module.ts：

 imports: [TranslateModule.forChild()]

服务器-app.module.ts：

  export function translateFactory() {
    return new TranslateUniversalLoader('./dist/assets/i18n', '.json');
  }

  imports: [
      TranslateModule.forRoot({
         loader: {
          provide: TranslateLoader,
           useFactory: translateFactory
      }
    })
 ]

翻译通用加载器：

 import {Observable} from "rxjs/Observable";
 import {TranslateLoader} from '@ngx-translate/core';
 const fs = require('fs');

 export class TranslateUniversalLoader implements TranslateLoader {
   constructor(private prefix: string = 'i18n', private suffix: string = '.json') {}

   public getTranslation(lang: string): Observable<any> {
     return Observable.create(observer => {
 observer.next(JSON.parse(fs.readFileSync(`${this.prefix}/${lang}${this.suffix}`, 'utf8')));
       observer.complete();
     });
   }
 }

webpack.common.js：

 plugins: [
new copyWebpackPlugin([
     {
       from: './src/assets/i18n/en.json',
       to: './assets/i18n/en.json'
     }
   ])
 ]   

app.component.ts：

 ngOnInit() {
     this.translateService.setDefaultLang('en');
     this.translateService.use('en');
 }

此外，当我查询 http://localhost:8000/assets/i18n/en.json 时，我的 en.json 分别得到了一个有效的答案：

{
   "TEST": "Super super"
 }

感谢任何帮助，这让我抓狂。

Answer 1

知道了，在 app.module.ts 我应该注入 HttpClient 而不是 Http（关于 AoT 的 README 仍然显示 Http）：

 imports: [
     HttpClientModule,
     TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: exportTranslateStaticLoader,
      deps: [HttpClient]
    }
  }
   )
  ]