"Error: Loading Chunk X failed" when accessing some lazy-loaded route modules in Angular 8 on IOS only

Question

问题描述

在我们的 Angular 8 项目中，一些路由是使用以下语法延迟加载的

{
  path: "/bread",
  loadChildren: () => import('./bread/bread.module')
   .then(m => m.BreadModule)
}

所有路由在几乎所有桌面和 Android 设备浏览器（包括 macOS Safari）中都运行良好（下面是经过测试的工作环境列表），但是 一些延迟加载的路由在 IOS 设备 上测试时失败。尝试访问这些路由时，无论是通过编程方式还是通过手动设置浏览器的 URL，控制台上都会显示以下错误：

ERROR ERROR Error: Uncaught (in promise): Error: Loading chunk 5 failed.
(missing: https://192.168.220.128/ui/5.962e65be9c4b000c89f6.js)
a@https://192.168.220.128/ui/runtime.b5d7c083c76af74c6510.js:1:1269
P@https://192.168.220.128/ui/polyfills.27aa9b55940b8e5475a1.js:1:18520
onInvokeTask@https://192.168.220.128/ui/main.1b4a84881faf77e4effa.js:1:144508
https://192.168.220.128/ui/polyfills.27aa9b55940b8e5475a1.js:1:3483
https://192.168.220.128/ui/polyfills.27aa9b55940b8e5475a1.js:1:9381
y@https://192.168.220.128/ui/polyfills.27aa9b55940b8e5475a1.js:1:22586
_@https://192.168.220.128/ui/polyfills.27aa9b55940b8e5475a1.js:1:22811

尝试过的解决方案

以下是我们尝试过但没有成功的解决方案列表：

• 添加全局 ExceptionHandler 以检测错误并强制网站重新加载。它会永远重新加载。
• 正在硬重置浏览器。实际上我们正在使用 Lampdatest 实时浏览器测试，每次新测试开始时，浏览器都是干净的。
• 一些 hack，比如挠头、喝更多咖啡并重定向到缓冲页面，然后再重定向到实际路由。

由于某些限制，我们t/couldn没有try/implement一些解决方案

• 任何 PWA
• 预加载模块
• 不使用延迟加载（实际上这会破坏性能并且仍然会在 iOS 上显示其他恶意错误）

工作环境

• Chrome (Windows - Linux - macOS - Android)
• Firefox (Windows - Linux - Android)
• 边缘
• IE11
• macOS 上的 Safari

失败的环境

• iOS 上的 Safari（在设备上试用并使用 Lambdatest 实时浏览器测试）
• Chrome iOS（尝试使用 Lambdatest 实时浏览器测试）
• FF on iOS（尝试使用 Lambdatest 实时浏览器测试）

一些files/logs可能有帮助

• Angular 工具版本：https://pastebin.com/Q5MpRvxV
• 浏览器列表：https://pastebin.com/Uasz4YXf
• package.json : https://pastebin.com/UQMM2jKv
• angular.json : https://pastebin.com/JeBQUmeQ

Answer 1

找到解决办法了，是我之前写的一段代码，macOS不支持，就是RegExp中的Positive Lookahead和Lookbehind。