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

【问题标题】：JSON files are not loading in ng2-translate with webpackJSON 文件未在 ng2-translate 中使用 webpack 加载
【发布时间】：2017-03-30 17:21:58
【问题描述】：

我正在尝试实现 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 file not found-404 错误。我正在使用 webpack，在 webpack.common.js 中，我有这样的 JSON 预加载器

preLoaders:[
    {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: 'json-loader'
    }
]

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

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

【问题讨论】：

第一个：检查是否构建复制文件到正确的位置，如果不检查它在浏览器开发工具中的源&&网络中的位置。如果它正在调用文件并且您得到 404，这意味着 ng2-translate 工作正常，只需更正构建过程（或更改路径）。第二：ng2-translate 正在使用不纯的管道，这在 angular2 中是非常非常糟糕的主意（您可以尝试 f.ex. angular2localization）
@MichałIgnaszewski 好的。但是我在哪里提到assets\i18n*.json 文件路径呢？

标签： javascript json angular internationalization ng2-translate

【解决方案1】：

我也遇到过同样的问题。 Webpack 只包含 'require'-ed 的文件，因此除非有 require('./path/to/file.json')，否则该文件不包含在内。此外，这样做意味着文件也会被散列，因此 ng2-translate 工具将无法识别该文件。

我通过使用 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

存在一个问题

【讨论】：

【解决方案2】：

改变

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

到

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

【讨论】：