如何配置 webpack 以在 Angular2 中使用 ng2-translate答案

【问题标题】：How to configure webpack to use ng2-translate in Angular2如何配置 webpack 以在 Angular2 中使用 ng2-translate
【发布时间】：2016-11-17 06:05:09
【问题描述】：

我在关注 Ocombe 的 ng2-translate 示例 Plunker link。我看到它是 System.js 的示例

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    'app': "./src",
    'ng2-translate': 'npm:ng2-translate',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
     ..........
     ..........

  }

如何使用 webpack 配置 ng2-translate？ webpack配置文件中的en.json和fr.json文件路径（path-src/main/app/assets/i18n/.json）哪里得提？

【问题讨论】：

github.com/ocombe/ng2-translate#configuration
@ranakrunal9 我遵循了那个例子，但我得到了 Json file not found 404 错误。我不明白我需要在 webpack 中的哪里提及这些文件
在ng2-translate服务正在检查文件的控制台中检查http://localhost:3000/#/assets/i18n/en.json之类的URL路径，并确保该文件存在于该位置。当您使用webpack 时，您可能忘记将这些文件复制到您的构建文件夹中。
检查这个example..
@ranakrunal9 我看到它无法加载 JSON 文件。我正在关注的示例，没有看到提到的那些 Json 文件或路径。不了解这些 Json 文件是如何被引用的。 [链接]github.com/ocombe/ng2-translate/tree/master/examples/webpack

标签： json angular webpack webpack-dev-server

【解决方案1】：

嘿，我猜你需要将此函数添加到你的 app.module 中：

    export function HttpLoaderFactory(http: Http) {
            return new TranslateHttpLoader(http, "assets/i18n/", ".json");
    }

【讨论】：