Angular - IOS 中的 PromiseReactionJob 错误

Question

我的网站（用 Angular 构建）无法在 IOS 上运行，打开时仅出现一个空白页面，并且浏览器返回 PromiseReactionJob 错误（在任何浏览器中），但仅在移动设备（平板电脑、iPhone...）上运行，我已在 mac 上尝试过，效果非常好。对错误进行了一些研究后，它仍然不起作用。有谁知道怎么解决吗

Answer 1

我不知道这个问题的确切错误是什么：我遇到了一个非常相似的问题，Ipad 显示空白页面，并且它尝试执行任何操作的唯一证据是 PromiseReactionJob 错误。

根本原因是我在 Javascript 编译中以

es2020

为目标，并且涉及的设备正在运行 Safari 13。它无法识别 Javascript 中的某些内容，并且当它尝试引导时遇到错误。 （这个问题稍微难以解决，因为从

platformBrowserDynamic

捕获的任何错误都会通过

console.error

而不是

console.trace

发送到控制台。在我更改它之前，我没有找到根本原因。）

解决方案是将设备更新到 iOS 15。Safari 15 随之而来，并且能够处理我的代码。

Answer 2

问题

在 Safari 13 及更早版本上测试我的 Angular 应用程序时，我出现了一个白页。控制台中记录的错误是以下错误：

SyntaxError: Unexpected token '{'
    promiseReactionJob

此错误仅发生在 Safari 13 及更早版本上，不会影响 Chrome 或 Firefox 等现代浏览器。经过一番调查后，我们发现该问题是由 Safari 13 中不受支持的现代 JavaScript 语法引起的，而 Safari 13 仍在接收适用于现代浏览器的代码。

---

原因

Safari 13 不支持某些 ECMAScript 2015+ (ES6+) 功能，例如：

• 可选链接 (

  ?.

  )
• 无效合并 (

  ??

  )

尽管 Angular 提供了双重构建（现代和旧版），

.browserslistrc

文件的配置决定了为旧版浏览器转译哪些功能。默认情况下，除非另有说明，Angular 假定支持相对现代的浏览器。

由于 Safari 13 未在我的

.browserslistrc

文件中明确定义，因此应用程序向其提供了 ES6+ 语法，从而导致错误。

---

解决方案

为了确保与 Safari 13 的兼容性，我扩展了我的

.browserslistrc

文件以明确包含对 Safari 13 的支持。以下是我的

.browserslistrc

的更新内容：

# Browserslist configuration
last 2 versions
not dead
Safari >= 13

此配置明确针对 Safari 13 并确保 Angular 构建管道：

1. 将现代 JavaScript 功能转换为 ES5。
2. 包括旧版浏览器所需的填充。

---

验证

确认问题并验证解决方案：

1. 我使用 BrowserStack 在 macOS 上模拟 Safari 13。
2. 更新

   .browserslistrc

   文件并重建应用程序后，错误消失，并且应用程序在 Safari 13 上正常运行。

---

要点

• 遇到特定于浏览器的问题时，请务必检查您的

  .browserslistrc

  文件。
• 像 BrowserStack 这样的工具对于旧版浏览器版本的测试非常有用。
• 通过在

  .browserslistrc

  文件中明确定位 Safari 13，您可以确保您的应用程序与此浏览器兼容。
• 有关支持的浏览器列表的更多信息，请访问 https://browsersl.ist/ 这个小调整解决了我的问题，并可能帮助其他人在 Angular 或其他 JavaScript 框架中面临类似的错误。