Angular ThreeJS 应用程序中的 ChunkLoadError 仅在 Safari 上答案

【问题标题】：ChunkLoadError in Angular ThreeJS app only on SafariAngular ThreeJS 应用程序中的 ChunkLoadError 仅在 Safari 上
【发布时间】：2021-06-30 15:43:58
【问题描述】：

我在 Angular 中使用 ThreeJS。上周我编译了我的代码并将最新版本的应用程序上传到服务器，然后我在 Mac 和 iPhone 上遇到了以下错误。

SyntaxError: Left hand side of operator '=' must be a reference

Error: Uncaught (in promise): ChunkLoadError: Loading chunk 4 failed. (missing: https://www.visetra.com/4.7c25f3405f531545d2e4.js)

这些错误仅存在于 Safari。但是，可以访问根据 Safari 丢失的块文件。清空缓存或以其他方式清理缓存无济于事。

我对错误和情况进行了研究。我发现了 2 种方法，它们为块加载错误创建全局错误处理程序并将应用程序转换为 PWA 以解决服务工作者的问题。我尝试处理 ChunkLoadError 并在错误发生时重新加载。但是，它不是固定的，并且发生了无限重新加载。我也尝试将我的应用程序转换为 PWA，结果是一样的。

通常，所有关于确定此问题原因的方法都是说，在每次使用 --output-hashing=chunk （此选项是 Angular 编译器的默认选项）的编译中，文件名都会被更改，自然浏览器无法找到正确的文件。因此，在大多数解决方案中，建议不要删除旧文件。但是根据这些解决方案，缓存清理应该可以解决问题。但是它对我不起作用。

当我尝试的时候，我意识到如果我删除包含 ThreeJS 的组件，那么这些错误就消失了。也许你可以认为它即将改变 ES5 ES6 因为包，但我从一开始就使用 ES6。

依赖关系：

 "dependencies": {
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@angular/service-worker": "~11.2.0",
    "@auth0/angular-jwt": "^5.0.2",
    "@capacitor/core": "2.4.7",
    "@ionic/angular": "^5.5.2",
    "@ionic/storage-angular": "^3.0.2",
    "rxjs": "~6.6.0",
    "three": "^0.126.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  }

【问题讨论】：

我遇到了同样的问题。对我来说，它通过降级到0.125.2 起作用，似乎已经突破了> 0.126
@LeonRadley 谢谢！它也适用于我。我打算将这个问题写到三个github页面。如果你在下面写下你的答案，我可以标记为正确答案。

标签： angular ionic-framework webpack ecmascript-6 three.js

【解决方案1】：

我不知道具体发生了什么变化，但是对于 Angular 版本 12.2.0 和 three.js 版本 0.131.3，这个问题似乎已经解决了！

~~我遇到了与 Angular 版本 12.0.2 和 three.js 版本 0.129.0 相同的问题。它与ES6有关。~~

对我来说，目前仅有的两种可能的解决方案是：

将 three.js 降级到版本 0.125.2（正如 Leon 上面建议的那样）

或

将tsconfig.json 中的目标降级为es5

{
  ...
  "compilerOptions": {
    ...
    "target": "es5"
    ...
  },
  ...
}

【讨论】：

按照@Leon Radley 的建议，将three.js 降级到0.125.2 版也对我有用。

【解决方案2】：

遇到完全相同的问题。

我尝试了很多事情：

降级/升级 ThreeJs
添加类型
将导入从导入 node_modules 更改为仅导入缩小文件。
将 lib 从 node_modules 移动到 assets。
尝试有条件地加载使用 lib 的 Angular 模块（禁用 safari 加载）。

到目前为止没有任何帮助。

【讨论】：