How to configure webpack to use ng2-translate in Angular2

0
votes

I was following Ocombe's ng2-translate example Plunker link. I see that it is example of 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',
     ..........
     ..........

  }

How do I configure ng2-translate with webpack? Where I have to mention the en.json and fr.json files path (path-src/main/app/assets/i18n/.json) in webpack configuration files?

1
jsonangularwebpackwebpack-dev-server
github.com/ocombe/ng2-translate#configuration - ranakrunal9
@ranakrunal9 I followed that example but I'm getting Json file not found 404 error. I'm not understanding where do I need to mention those files in webpack - Protagonist
check the URL path like http://localhost:3000/#/assets/i18n/en.json in console where ng2-translate service is checking file and make sure that file exists at that place. As you are using webpack may be you forgot to copy that files in you build folder. - ranakrunal9
Check this example.. - Thaadikkaaran
@ranakrunal9 I see that its failing to load the JSON files. The example I'm following, no where I see those Json files mentioned or the path. Not understanding how those Json files are referenced. [link]github.com/ocombe/ng2-translate/tree/master/examples/webpack - Protagonist

1 Answers

0
votes

Hey I guess you need to add this function to your app.module:

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