ngx-translate 和 angular 通用:找不到客户端翻译
ngx-translate and angular universal: client side translations not found
半天以来,我尝试将 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]
}
}
)
]
浏览器-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
}
})
]
翻译通用加载器:
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"
}
感谢任何帮助,这让我抓狂。
知道了,在 app.module.ts 我应该注入 HttpClient 而不是 Http(关于 AoT 的 README 仍然显示 Http):
imports: [
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: exportTranslateStaticLoader,
deps: [HttpClient]
}
}
)
]
半天以来,我尝试将 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]
}
}
)
]
浏览器-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
}
})
]
翻译通用加载器:
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"
}
感谢任何帮助,这让我抓狂。
知道了,在 app.module.ts 我应该注入 HttpClient 而不是 Http(关于 AoT 的 README 仍然显示 Http):
imports: [
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: exportTranslateStaticLoader,
deps: [HttpClient]
}
}
)
]