我正在尝试实现 ng2-translate i18n。
dashboard.component.ts
import { Component } from '@angular/core';
import {TranslateService} from 'ng2-translate';
@Component({
selector: 'dashboard-page',
template:`<div>
<h2>{{ 'HOME.TITLE' | translate }}</h2>
<label>
{{ 'HOME.SELECT' | translate }}
<select #langSelect (change)="translate.use(langSelect.value)">
<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
</select>
</label>
</div>`
})
export class DashboardComponent {
constructor(private translate: TranslateService) {
translate.addLangs(["en", "fr"]);
translate.setDefaultLang('en');
let browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
}
}
这个文件的路径是src/main/app/dashboard/dashboard.component.ts
2 个 JSON 文件 - en.json 和 fr.json 的路径是 src/main/app/assets/i18n。
我在 app.module.ts 中包含了 TranslateModule
但是当我运行该应用程序时,我收到 en.json 文件未找到 - 404 错误。我正在使用 webpack,在 webpack.common.js 中我有这样的 JSON 预加载器
preLoaders:[
{
test: /\.json$/,
exclude: /node_modules/,
loader: 'json-loader'
}
]
我仍然收到未找到 JSON 文件的错误。
根据我所遵循的示例,我不明白路径 assests\i18n.json 在哪个文件中被提及。
最佳答案
我遇到过同样的问题。 Webpack 仅包含“需要”的文件,因此除非有 require('./path/to/file.json'),否则不会包含该文件。此外,这样做意味着文件也将被散列,因此 ng2-translate util 将无法识别该文件。
我通过使用 CopyWebpackPlugin(参见 https://github.com/kevlened/copy-webpack-plugin)解决了这个问题,方法是将以下配置添加到我的 webpack.config.js 文件中
var CopyWebpackPlugin = require('copy-webpack-plugin');
...
plugins: [
new CopyWebpackPlugin([ { from: 'src/assets/i18n', to: 'assets/i18n' } ])
]
我还如下配置了翻译模块,因为我的资源是在 /assets/i18n 文件夹下找到的,而不是默认的 /i18n 文件夹。
在app.translate.ts中(注意函数的导出,这是AoT所必需的)
export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http, 'assets/i18n', '.json');
}
export const AppTranslateModule: ModuleWithProviders = TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [ Http ]
});
在我的 app.module.ts 中如下
@NgModule({
imports: [ AppTranslateModule, ... ],
...
})
export class AppModule {
}
注意:到撰写本文时,ng2-translate webpack 示例已损坏。事实上,这个 https://github.com/ocombe/ng2-translate/issues/325 有一个 Unresolved 问题
关于javascript - 使用 webpack 的 ng2-translate 中未加载 JSON 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40633355/