Angular 14中静态初始化块未被转译的问题咨询

环境配置 #

tsconfig.json #

{
  "compileOnSave": false,
  "compilerOptions": {
      "baseUrl": "./",
      "outDir": "./xy",
      "sourceMap": true,
      "declaration": false,
      "experimentalDecorators": true,
      "moduleResolution": "node",
      "importHelpers": true,
      "target": "es2022",
      "module": "es2022",
      "resolveJsonModule": true
  }
}

package.json中的browserslist #

"browserslist": [
    "ios_saf >= 15.5",
    "Safari >= 15.6.1",
    "Firefox >= 102",
    "last 2 Edge versions",
    "last 2 Chrome versions"
]

待转译代码 #

export class XYZ {
  private static y: any;
  static {
    try {
        this.y = this.hello();
    } catch {
        this.y = 'unknown';
    }
  }

 static hello() {
    return 'hello';
}
}

问题原因 #

核心问题在于TypeScript编译器（tsc）不会直接读取browserslist配置调整语法降级逻辑：

• 你设置了target: es2022，而类静态初始化块是ES2022的标准特性，tsc会判定该语法符合目标版本，因此不会进行转译。
• browserslist的作用主要是指导Angular的polyfill注入、或Babel等工具的语法降级，但无法直接改变tsc自身的转译规则。
• 另外，Safari 15.6.1确实不支持ES2022的静态初始化块，该特性要到Safari 16及以上版本才支持。

解决方案 #

方案1：降低tsconfig的target版本 #

将tsconfig.json中compilerOptions.target改为es2021或更低版本：

"target": "es2021"

这样tsc会自动将ES2022特有的静态初始化块转译为低版本ES兼容的代码，比如通过静态属性赋值+立即执行函数的方式模拟。

方案2：保留target为es2022，用Babel单独处理语法降级 #

如果需要保留其他ES2022特性，仅针对静态初始化块做降级，可以通过Angular自定义Webpack配置配合Babel实现：

1. 安装依赖：

npm install @angular-builders/custom-webpack @babel/core @babel/plugin-proposal-class-static-block @babel/preset-typescript --save-dev

2. 在项目根目录创建webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@babel/plugin-proposal-class-static-block'],
              presets: ['@babel/preset-typescript']
            }
          }
        ]
      }
    ]
  }
};

3. 修改angular.json中的构建配置，使用自定义Webpack builder：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 其他原有配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 其他原有配置...
  }
}

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