1

angular Universal starter app で ngx-translate を使用するために、半日以来成功していません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]
    }
  }
  )
]

browser-app.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
      }
    })
 ]

TranslateUniversalLoader:

 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"
 }

助けていただければ幸いです。これは私を夢中にさせます。

4

1 に答える 1