Question

我正在尝试实施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＆amp; 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文件错误。

从我关注的例子中，我不明白路径所在的文件中提到了\ i18n.json。

Answer 1

我遇到过同样的问题。 Webpack只包含'require'-ed的文件，因此除非有 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' } ])
 ]

我还将Translate模块配置如下，因为我的资源位于 / 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

存在问题

Answer 2

更改

new CopyWebpackPlugin([ { from: 'src/assets/i18n', to: 'assets/i18n' } ])

到

new CopyWebpackPlugin({ patterns: [ { from: './src/assets/i18n', to: 'assets/i18n' } ] }),

使用webpack在ng2-translate中加载JSON文件

2 个答案: