JSON files are not loading in ng2-translate with webpack

Question

I'm trying to implement 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');
    }
}

Path of this file is src/main/app/dashboard/dashboard.component.ts

Path of the 2 JSON files- en.json & fr.json is src/main/app/assets/i18n.

I have included TranslateModule in app.module.ts

But when I run the app, I'm getting en.json file not found-404 error. I'm using webpack and in webpack.common.js I have preloader for JSON like this

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

Still I'm getting JSON file not found error.

And from the examples I was following, I din't understand in which file the path assests\i18n.json is to be mentioned.

1st: check is build copy file to right place, if not check where it is in sources&&network in browser development tools. If it is calling file and you get 404 that means ng2-translate works ok, just building process have to corrected (or path changed). 2nd: ng2-translate is using inpure pipes, that is very very bad idea in angular2 (you can try f.ex. angular2localization) — Michał Ignaszewski
@MichałIgnaszewski Ok. But where do I mention the assests\i18n*.json file path? — Protagonist

JeanPaul A. JeanPaul A. · Accepted Answer · 2016-12-07T16:50:02

I have encountered this same issue. Webpack only include files which are 'require'-ed, so unless there is a require('./path/to/file.json') the file is not included. Furthermore, by doing so would mean that the file will also become hashed, and thus the file will not be recognized by the ng2-translate util.

I came around this issue by using the CopyWebpackPlugin (see https://github.com/kevlened/copy-webpack-plugin) By adding the following config to my webpack.config.js file

 var CopyWebpackPlugin = require('copy-webpack-plugin');

 ...

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

I also configured the Translate module as following because my resources were found under the /assets/i18n folder, rather than the default /i18n folder.

In app.translate.ts (note the export of the function, this is required for 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 ]
});

And in my app.module.ts as follows

@NgModule({
    imports: [ AppTranslateModule, ... ],
    ...
})
export class AppModule {
}

Note: To the time of writing, the ng2-translate webpack example is broken. In fact there is an issue open for this https://github.com/ocombe/ng2-translate/issues/325

JSON files are not loading in ng2-translate with webpack

2 Answers