Angular 2错误:加载块多次失败 [英] Angular 2 Error: Loading chunk failed many times
问题描述
我在服务器上部署了angular 2应用程序,它运行正常.另外,我正在记录角度应用程序的错误,以便我可以解决它们并使我的应用程序更稳定.
I have angular 2 application deployed on server which is working fine. Also I am logging errors of angular application so that I can solve them and make my application more stable.
我一直在收到Loading chunk failed
错误.
Error: Uncaught (in promise): Error: Loading chunk 9 failed.
(error: https://prjectcdn/9.d91e531959b3f1aa8ff2.js)
Error: Loading chunk 9 failed.
(error: https://prjectcdn/9.d91e531959b3f1aa8ff2.js)
at HTMLScriptElement.u (https://prjectcdn/runtime.94ca0c35f923f70cf7e7.js:1:1243)
at HTMLScriptElement.P (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:73488)
at t.invokeTask (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:64564)
at Object.onInvokeTask (https://prjectcdn/main.86b90fde964f10f1e8a8.js:1:756933)
at t.invokeTask (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:64485)
at n.runTask (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:59748)
at n.invokeTask [as invoke] (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:65654)
at m (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:76575)
at HTMLScriptElement.b (https://prjectcdn/polyfills.ba52267bd36a0b180ce1.js:1:76805)
at HTMLScriptElement.u (webpack:///webpack/bootstrap:133:0)
at apply (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1188:38)
at apply (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:421:30)
at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/@angular/core/fesm5/core.js.pre-build-optimizer.js:17290:32)
at onInvokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:420:35)
at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:188:46)
at runTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:496:33)
at invoke (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1540:13)
at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1566:16)
at z (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:814:30)
at resolvePromise (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:771:16)
at webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:873:16
at apply (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:421:30)
at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/@angular/core/fesm5/core.js.pre-build-optimizer.js:17290:32)
at onInvokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:420:35)
at invokeTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:188:46)
at runTask (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:595:34)
at drainMicroTaskQueue (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:500:20)
at invoke (webpack:///C:/GitApps/prodoh/WebApp/angular-app/node_modules/zone.js/dist/zone.js.pre-build-optimizer.js:1540:13)
我也总是将旧数据块保留在CDN中,但仍然经常出现此错误.这个问题的根本原因应该是什么?如何克服这个问题?
I keep old chunks also in CDN always but still getting this error a lot. What should be the root cause of this problem and how I can overcome this?
我无法重现此错误.
推荐答案
错误:未捕获(承诺):错误:加载块9失败.
Error: Uncaught (in promise): Error: Loading chunk 9 failed.
As described in details by this article
-
角度延迟加载功能是一种根据需要加载NgModules的设计模式,它将构建文件分为许多块并按需加载 加快页面速度.
Angular lazy loading feature is a design pattern that loads NgModules as needed, which splits build file into many chunks and load on demand to speed up page.
默认情况下,浏览器会在初始加载时缓存HTML和CSS/JS块,以加快速度 通过从缓存加载而不是通过网络调用来加载应用.
By default browser cached the HTML and CSS/JS chunks on initial load to speed up app by loading from cache instead of making network call.
期望Loading chunk error
Expect reason of Loading chunk error
- 如果您已经在浏览器中打开了应用程序,并且尝试导航路由加载块时发生了新的构建部署失败的问题,因为浏览器使用的是已缓存的块而不是新部署的.
解决此问题的方法.
-
部署新版本后硬刷新
(control + shift + R)
页面以加载新块,一切正常,我们需要向用户显示弹出消息并要求他重新加载页面
Hard refresh
(control + shift + R)
page after new build deploy to load new chunks everything works fine, all we need to either show a popup message to user and ask him to reload page
如果使用global error handler
import { ErrorHandler } from '@angular/core';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: any): void {
const chunkFailedMessage = /Loading chunk [\d]+ failed/;
if (chunkFailedMessage.test(err.message)) {
window.location.reload();
}
// other stuff for error handling.
}
}
- 在我们的根模块中提供它来更改应用程序中的默认行为,因此,我们使用自定义的
GlobalErrorHandler
类来代替使用默认的ErrorHandler类. - Provide it in our root module to change default behavior in our app, so instead of using default ErrorHandler class we are using our custom
GlobalErrorHandler
class.
@NgModule({
providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}]
})
这篇关于Angular 2错误:加载块多次失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!