JSON files are not loading in ng2-translate with webpack

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

Change

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

to

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