Core: JSON files are not loading:getting 404 error with webpack

Created on 17 Nov 2016 · 6Comments · Source: ngx-translate/core

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior

I'm using webpack with ng2-translate and JSON files (ex-en.json, fr.json) are not picking up.

Source

protagonist51

Most helpful comment

@yogesh51 If you follow the guide of ng2-translate correctly, you will know that you need to put this (the lines in bold below) in app.module.ts to point to the public folder that stores the JSON files.

@NgModule({
imports: [
BrowserModule,
AuthModule,
HomeModule,
CoreModule.forRoot(),
AppRoutingModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (http: Http) => new TranslateStaticLoader(http, 'dist/assets/i18n', '.json'),
deps: [Http]
})
],
declarations: [AppComponent, HeaderComponent, FooterComponent, AsideComponent],
bootstrap: [AppComponent]
})

ht89 on 18 Nov 2016

❤1 👍1

All 6 comments

You should install Copy Webpack Plugin in this link Copy Webpack Plugin. It's used to copy files from a source to another. I tried it and now angular can find the JSON files.

The important lines to notice are these:
new CopyWebpackPlugin([ { from: 'src/assets/i18n', to: 'assets/i18n' } ])

replace the from with the folder that stores your JSON files

ht89 on 17 Nov 2016

👍2

@ht89 How do I use that plugin? I mean where do I mention about that plugin in webpack.config.js?

protagonist51 on 17 Nov 2016

More info could be found in the examples section of the plugin.

SamVerschueren on 17 Nov 2016

Also you can take a look at this starter that uses this plugin with angular 2: https://github.com/preboot/angular2-webpack

ocombe on 17 Nov 2016

@SamVerschueren @ocombe I tried using copy-webpack plugin and tried to configure in webpack.dev.js in this way
`var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',

    output: {
        path: helpers.root('webapp'),
        publicPath: 'http://localhost:8080/',
       // publicPath : '/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

plugins: [
new ExtractTextPlugin('[name].css'),

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

    devServer: {
        contentBase: helpers.root(__dirname, 'webapp'),
        historyApiFallback: true,
        stats: 'minimal',
        noInfo: false,
        port: 8080,
        inline: true,
        open: true
    }
});`

But still getting 404 error. It is not at all recognizing the files. @ocombe Could you please suggest how did u make a reference in webpack.config.js to en & fr json files? How it gonna read those? Please guide me.

protagonist51 on 17 Nov 2016