我正在使用带有webpack构建的angular 6 MVC应用程序。它会在页面加载或重定向时随机抛出“loadChunkError”:true“,错误发生后,角度路由不起作用并连续抛出控制台错误。
[注意:一旦我清除浏览器缓存然后路由工作正常]
Webpack文件
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;
};
错误
错误:未捕获(在承诺中):对象:{“loadChunkError”:true,“details”:{“type”:“missing”,“request”}
请提供解决问题的解决方案或步骤。
谢谢,Vivek
根本原因:在我的情况下,由于旧的缓存的js块,存在加载块错误。 修复:通过哈希的帮助生成唯一的js修复了问题
[hash]是“为每个构建生成的唯一哈希”
现有
output: {
path: viewPath,
publicPath: '/',
filename: "../../angularBundle/[name].js",
chunkFilename: '../../angularBundle/[name].js',
sourceMapFilename: "../../angularBundle/[name].js.map",
}
更新[已修复问题]
output: {
path: viewPath,
publicPath: '/',
filename: "../../angularBundle/[name].[hash].js",
chunkFilename: '../../angularBundle/[name].[hash].js',
sourceMapFilename: "../../angularBundle/[name].[hash].js.map",
}
component
而不是loadChildren
直接加载组件然后你可以看到实际的错误