升级Angular 16后Safari 14出现SyntaxError无效字符#问题求助

问题根源 #

Angular 16官方已不再支持Safari 14（最低支持Safari 15.4+），默认构建配置会生成Safari 14无法解析的ES6+语法——最常见的是TypeScript私有字段语法（#privateField），这类语法在Safari 14中会被识别为无效字符。同时默认的browserslist规则不包含Safari 14，导致构建工具不会针对该浏览器做语法降级。

解决步骤 #

1. 强制配置browserslist兼容Safari 14

在项目根目录创建或修改.browserslistrc文件，添加以下规则：

last 1 Chrome version
last 1 Firefox version
safari >= 14

或者直接在package.json中添加browserslist字段：

"browserslist": [
  "last 1 Chrome version",
  "last 1 Firefox version",
  "safari >= 14"
]

执行npx browserslist验证规则是否生效，此时Safari 14应该出现在支持列表中。

2. 调整TypeScript与Angular构建目标

修改tsconfig.json，将编译目标降级到Safari 14支持的ES版本：

{
  "compilerOptions": {
    "target": "es2019",
    "lib": ["es2019", "dom"],
    ...
  }
}

同时修改angular.json的构建配置，确保构建工具遵循目标版本：

{
  "projects": {
    "carpathia": {
      "architect": {
        "build": {
          "options": {
            "target": "es2019",
            "polyfills": ["src/polyfills.ts"],
            // 如果使用esbuild，添加以下配置
            "esbuildOptions": {
              "target": "es2019"
            },
            ...
          }
        }
      }
    }
  }
}

3. 移除或转译私有字段语法

如果项目代码中使用了TypeScript私有字段（如#myPrivateField），Safari 14完全不支持该语法，需做以下处理：

• 替换为传统的private修饰符（编译后会转为下划线命名的属性，兼容旧浏览器）
• 若无法替换，需切换回Webpack构建（Angular 16默认用esbuild，esbuild对私有字段的转译支持有限），并配置Babel插件@babel/plugin-proposal-private-property-in-object和@babel/plugin-proposal-private-methods

4. 检查依赖包的兼容性

部分第三方依赖可能输出了包含私有字段或其他未转译的ES6+代码，导致Safari 14报错。可通过以下方式处理：

• 在angular.json的build.options.allowedCommonJsDependencies中添加该依赖，强制构建工具对其转译
• 替换为兼容旧浏览器的依赖版本

内容的提问来源于stack exchange，提问作者Alin Lazar