使用webpack时，ng2-translate无法加载JSON文件。

Question

我正在尝试实现ng2-translate国际化。

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

两个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文件未找到的错误。

根据我按照的示例，我不明白在哪个文件中要提及路径assets\i18n.json。

- Protagonist

---

1st: 检查构建的复制文件是否放在正确的位置，如果没有，请在浏览器开发工具的源代码和网络中检查它的位置。如果调用文件时出现 404 错误，这意味着 ng2-translate 正常工作，只需要更正构建过程（或更改路径）。 2nd: ng2-translate 使用的是不纯的管道，在 Angular2 中这是一个非常糟糕的想法（你可以尝试使用 angular2localization）。 - Michał Ignaszewski

@MichałIgnaszewski 好的。但是我在哪里提到资源\i18n*.json文件的路径？ - Protagonist

Answer 1

我遇到了同样的问题。Webpack只会包含被"require"的文件，所以除非有一个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文件夹中，将Translate模块配置如下。

在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

- JeanPaul A.

Answer 2

更改

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

至

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

- Tiago Corrêa