ngx-translate和角度通用：未找到客户端翻译

由于半角使用ngx-translate与角度通用启动器应用https://github.com/angular/universal-starter，我尝试没有成功。让别人知道为什么下面的工作不正常？ngx-translate和角度通用：未找到客户端翻译

当我开始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] 
    } 
    } 
) 
]

浏览器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'); 
}

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

{ 
    "TEST": "Super super" 
}

任何帮助表示赞赏，这迫使我坚果。

来源

2017-08-03 David Dal Busco

尝试一个更简单的设置为引导入[DOC]（HTTPS： //github.com/ngx-translate/core#usage）。您也可以检查此[答案]（https://stackoverflow.com/a/45380000/5556177） – Nehal

Thx，但我不会尝试更简单的设置，我想在角度通用的情况下使用ngx-translate，并且我不在我的项目中除了克隆通用启动器应用程序和ngx-translate –

之外没有任何其他内容。更简单的设置是由ngx-translate团队在其文档中推荐的ngx-translate。它会自动从'assets> i18n'中拉入json文件，所以你不必在'webpack.common.js'中改变任何东西。一天结束，这是你的选择:) – Nehal

明白了，在app.module.ts我应该注入的HttpClient而不是HTTP（约AOT自述仍显示HTTP）：

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

来源

2017-08-03 18:19:36

与此我得到错误：没有供应商为HttpClient – netshark1000

@ netshark1000你很可能需要在你的app.module中导入HttpClientModule。 HttpClientModule是在Angular 4.3中引入的http://blog.angular-university.io/angular-http/ –

谢谢 - 它有助于消除错误。但我的翻译没有找到（没有在控制台中的任何错误）... – netshark1000

ngx-translate和角度通用：未找到客户端翻译

回答

相关问题