在 Google Chrome 上加载块和意外标记“<”时出错

Question

我正在运行宁 Angular 6 应用程序 Node.js 作为后端。我遇到了一个只发生在 Google Chrome 中的奇怪错误：

Uncaught SyntaxError: Unexpected Token '<'
Error: Uncaught (in promise): Error: Loading chunk # failed.

在我的应用程序中看似随机的点，只有我的一些用户会出现此错误（并且每个用户都有不同的块号出现，块号在 1 到 18 之间）。有些用户可以登录到我的应用程序，然后运行进入 "chunk 12 failed" 代码，而其他用户无法登录并运行进入 "chunk 16 failed" 代码。每当尝试打开一条新路线时都会发生这种情况（我的意思是从 www.website.com/dashboard 到 www.website.com/forms).

我试图从 Chrome 的缓存中清除 cookie，但这并没有消除错误。在 Internet Explorer 或 Firefox 上运行ning 时，我的应用程序不会出现此错误，因此这显然是一个 Chrome-only 错误。我还阅读了另一个 Stack Overflow 问题，该问题可能与名为 Webpack 的依赖项有关，因此我尝试更新它和其他一些模块，但错误仍然存在。

一位用户发现只需在新选项卡中打开路由即可绕过此错误。我不明白为什么这样可以解决问题，但是从同一个选项卡更改路线是行不通的。如有任何帮助，我们将不胜感激！

Answer 1

已找到解决方案 - 该问题是由用户会话中的旧缓存触发的，这些缓存在推送更新时处于打开状态。这导致在更新中编辑的组件出现随机问题。解决方案是针对全局错误捕获器中的错误并进行硬刷新，这会强制进行更新，从而消除块错误。

export class ErrorNotificationService implements ErrorHandler {


handleError(error: any) {
 const chunkFailedMessage = /Loading chunk [\d]+ failed/;

 if (chunkFailedMessage.test(error.message)) {
   alert("This is an outdated version of this webpage. This page will now be 
refreshed.")
   window.location.reload();
 }
}

并作为provider引入到父组件中：

providers: [
   { provide: ErrorHandler, useClass: ErrorNotificationService },
],

我还找到了一些替代方法来避免让用户刷新他们的网页。看这里Auto reload for clients after deploy in Angular 7

在 Google Chrome 上加载块和意外标记“<”时出错

Error Loading Chunk and Unexpected Token '<' on Google Chrome

apache

google-chrome

node.js

angular

angular6