Angular 6 page reload or redirect throws "loadChunkError":true
vivekkingston opened this issue · comments
I'm using angular 6 MVC application with webpack build. It throws an "loadChunkError":true" randomly on page load or redirect,
After the error occurred, angular routing not works and throws an console error continuously.
[Note: Once i cleared the browser cache and then routing works fine]
Webpack file
const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
var SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
let SharedCache = {};
const entryPath = path.resolve(__dirname, "src");
const viewPath = path.resolve(
__dirname,
"../Views/Home"
);
const { BaseHrefWebpackPlugin } = require('base-href-webpack-plugin');
const ROOT = path.resolve(__dirname, '');
const app = ${entryPath}
;
module.exports = envOptions => {
envOptions = envOptions || {};
const config = {
entry: {
polyfills: `${entryPath}\\polyfills.ts`,
vendors: `${entryPath}\\vendor.ts`,
app: `${entryPath}\\main.ts`
},
output: {
path: viewPath,
publicPath: '/',
filename: "../../angularBundle/[name].js",
chunkFilename: '../../angularBundle/[name].js',
sourceMapFilename: "../../angularBundle/[name].js.map",
},
resolve: {
extensions: [".ts", ".js", ".html"],
alias: {
jquery: "jquery/src/jquery"
}
},
module: {
rules: [
{
test: /\.ts$/,
loaders: ["awesome-typescript-loader?configFileName=./src/tsconfig.json", "angular2-template-loader"]
},
{
test: /\.(ts|js)$/,
loaders: [
'angular-router-loader'
]
},
{
test: /\.html$/,
loader: "raw-loader"
},
{
test: /\.css$/,
loader: "raw-loader"
}
,
{
test: /\.(png|jpg|eot|cur|svg|gif|ttf|woff|otf)$/,
loader: "file-loader",
options: {
outputPath: 'fonts/'
}
}
]
},
devtool: 'eval',
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
template: viewPath + "/loader.cshtml",
filename: viewPath + "/Index.cshtml",
inject: false
})
],
optimization: {
splitChunks: { chunks: 'all' },
},
};
if (envOptions.MODE === "prod") {
config.plugins.push(
new UglifyJsPlugin()
);
}
return config;
};
Please suggest a solution or steps to fix the issue.
Thanks,
Vivek
Fixed the issue by generated the output chunk with hash