我正在使用带有 webpack 构建的 angular 6 MVC 应用程序。它在页面加载或重定向时随机抛出一个 "loadChunkError":true", 发生错误后,angular routing 不工作并不断抛出控制台错误。
[注意:一旦我清除了浏览器缓存,路由就可以正常工作了]
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 => {
环境选项 = 环境选项 || {};
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;
};
错误
Error: Uncaught (in promise): Object: {"loadChunkError":true,"details":{"type":"missing","request"}
请提出解决问题的解决方案或步骤。
谢谢, 维维克
最佳答案
根本原因:在我的例子中,由于旧的缓存 js block ,存在加载 block 错误。
修复:通过hash生成唯一js修复问题
[hash] 是“为每个构建生成的唯一哈希”
现有
输出:{
路径: View 路径,
公共(public)路径:'/',
文件名:“../../angularBundle/[名称].js”,
chunkFilename: '../../angularBundle/[name].js',
sourceMapFilename: "../../angularBundle/[name].js.map",
}
已更新[问题已修复]
输出:{
路径: View 路径,
公共(public)路径:'/',
文件名:“../../angularBundle/[名称].[哈希].js”,
chunkFilename: '../../angularBundle/[name].[hash].js',
sourceMapFilename: "../../angularBundle/[name].[hash].js.map",
}
关于angular6 - Angular 4 页面重新加载或重定向抛出 "loadChunkError":true,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52218987/