更新到 Angular 15 后，Safari 因“SyntaxError: Unexpected token '{'”而崩溃

Question

最近升级我的 Angular 版本后，Safari 始终出现问题，出现一些奇怪的语法错误，未指定行号或文件。 所有其他浏览器似乎都很好。

SyntaxError: Unexpected token '{'
> promiseReactionJob

我的

.browserlistrc

文件看起来像：

> 0.5%
last 2 versions
Firefox ESR
not dead

有什么方法可以缩小导致错误的请求或脚本的范围吗？

Answer 1

我能够通过将

target

选项重新添加到

tsconfig.app.json

来解决该问题。 查看提交差异后，我注意到它在升级过程中被删除了。

  "compilerOptions": {
    "target": "es2020" // removing this breaks Safari!!
  },

Answer 2

对于使用 Angular 18 的人来说，请注意，在 tsconfig.app.json 中指定“目标”来添加与旧版浏览器的兼容性可能还不够：

 "compilerOptions": {
    "target": "es2020" // removing this breaks Safari!!   
 },

运行

ng build

时，会出现一条警告，告诉您 Angular 在使用 Angular CLI 时将覆盖其默认配置：

[警告] TypeScript 编译器选项“目标”和 'useDefineForClassFields' 分别设置为 'ES2022' 和 'false' 通过 Angular CLI。 [插件角度编译器]

因此，您可以使用 browserlists 添加与旧版浏览器的兼容性，对于 Angular 可以通过以下方式完成：

1. 安装依赖项：

   npm install --save-dev browserslist@latest caniuse-lite@latest

2. 生成配置文件：

   ng generate config browserslist

3. 将配置添加到文件中。
4. 检查您的浏览器运行兼容性：

   npx browserslist

其他配置可以使用浏览器列表，请查看文档！

添加上述配置后，我的 Angular 构建在 Safari 中可以正常工作！