angular - 仅在 Safari 上的 Angular ThreeJS 应用程序中的 ChunkLoadError

Question

我在 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 以解决 Service Worker 的问题。我尝试处理 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"
  }

Answer 1

我不知道究竟发生了什么变化，但使用 Angular 版本 12.2.0和三个.js版本0.131.3这个问题好像已经解决了!
我遇到了与 Angular 版本相同的问题 12.0.2和三个.js版本0.129.0 .它与 ES6 有关系。
对我来说，目前仅有的两种可能的解决方案是:

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

或者

降级目标tsconfig.json至 es5

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