Angular 2 错误：加载块多次失败

Question

我在服务器上部署了 angular 2 应用程序，运行良好。我还记录了角度应用程序的错误，以便我可以解决它们并使我的应用程序更稳定。

我不断收到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 中保留旧块，但仍然经常出现此错误。这个问题的根本原因应该是什么，我该如何克服这个问题？

我无法重现此错误。

Answer 1

错误：未捕获（承诺中）：错误：加载块 9 失败。

---

如本文所述article

• Angular 延迟加载功能是一种根据需要加载 NgModules 的设计模式，它将构建文件分成许多块并按需加载 加快页面速度。

• 默认情况下，浏览器会在初始加载时缓存 HTML 和 CSS/JS 块以加快速度 应用程序通过从缓存加载而不是进行网络调用。

---

预计Loading chunk error的原因

• 如果您已经在浏览器中打开了应用程序，并且在您尝试导航路由加载块失败时进行了新构建部署，则会出现问题，因为浏览器正在使用已缓存的块而不是新部署的块。

---

解决此问题的解决方法。

1. 新构建部署后硬刷新(control + shift + R)页面以加载新块一切正常，我们只需要向用户显示弹出消息并要求他重新加载页面

2. 如果使用 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 类。

---

@NgModule({   
  providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}]
})