Angular构建时为何会对JS私有字段（#field）进行Polyfill？

你遇到的情况是Angular构建流程多因素共同作用的结果，核心是构建工具不会仅依赖tsconfig的target值，而是结合浏览器兼容性、TypeScript编译选项等综合决定是否转译原生语法，具体原因如下：

• browserslist配置优先级更高
  Angular CLI默认会读取项目根目录的.browserslistrc（或package.json里的browserslist字段）确定兼容浏览器范围。如果你的配置包含不支持ES2022私有字段的旧版浏览器（比如Chrome < 74、Safari < 14.1），构建工具（Angular 17默认用esbuild）会自动用WeakMap对私有字段做polyfill，确保代码能在目标浏览器正常运行。

• TypeScript的useDefineForClassFields未启用
  Angular 17的默认tsconfig可能没显式设置useDefineForClassFields: true。当这个选项为false时，TypeScript不会直接输出原生的#私有字段语法，而是转译为基于WeakMap的实现。只有开启该选项，TypeScript才会尊重原生私有字段语法，直接输出对应代码。

• esbuild的转译逻辑限制
  esbuild作为默认构建工具，会同时参考tsconfig.target和browserslist配置。如果两者冲突（比如target设为ES2022，但browserslist要求兼容不支持该特性的浏览器），esbuild会优先满足浏览器兼容性需求，执行转译处理。

解决步骤 #

1. 修改tsconfig.json的compilerOptions，添加并启用useDefineForClassFields：

   {
     "compilerOptions": {
       "target": "ES2022",
       "useDefineForClassFields": true
     }
   }
   

2. 更新.browserslistrc，仅保留支持ES2022私有字段的浏览器，示例：

   last 2 Chrome versions
   last 2 Firefox versions
   last 2 Edge versions
   last 2 Safari versions
   

3. 重新执行ng build，此时原生JS私有字段就不会被WeakMap polyfill了。

内容的提问来源于stack exchange，提问作者Vasily Kravchenko