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

Question

我正在尝试实现 ng2-translate i18n。

\n\n

仪表板.组件.ts

\n\n

import\xc2\xa0{ Component }\xc2\xa0from\xc2\xa0\'@angular/core\';\nimport\xc2\xa0{TranslateService}\xc2\xa0from\xc2\xa0\'ng2-translate\';\n@Component({\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0selector:\xc2\xa0\'dashboard-page\',\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0template:`<div>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<h2>{{ \'HOME.TITLE\' | translate }}</h2>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<label>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{{ \'HOME.SELECT\' | translate }}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<select #langSelect (change)="translate.use(langSelect.value)">\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0<option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</select>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</label>\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0</div>`\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\n})\n\nexport class DashboardComponent {\n    constructor(private translate: TranslateService) {\n        translate.addLangs(["en", "fr"]);\n        translate.setDefaultLang(\'en\');\n\n        let browserLang = translate.getBrowserLang();\n        translate.use(browserLang.match(/en|fr/) ? browserLang : \'en\');\n    }\n}\n

\n\n

该文件的路径是src/main/app/dashboard/dashboard.component.ts

\n\n

2 个 JSON 文件 - en.json 和 fr.json 的路径是src/main/app/assets/i18n。

\n\n

我已将 TranslateModule 包含在 app.module.ts 中

\n\n

但是当我运行该应用程序时，我收到 en.json 文件未找到-404 错误。我正在使用 webpack，在 webpack.common.js 中我有这样的 JSON 预加载器

\n\n

preLoaders:[\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0{\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0test:\xc2\xa0/\\.json$/,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0exclude:\xc2\xa0/node_modules/,\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0loader:\xc2\xa0\'json-loader\'\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0}\n]\n

\n\n

我仍然收到 JSON 文件未找到错误。

\n\n

从我遵循的示例中，我不明白在哪个文件中要提到路径assests\\i18n.json。

\n

Answer 1

我也遇到过同样的问题。Webpack 仅包含“require”编辑的文件，因此除非存在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