Angular 8升级至12后生产构建报错：Class static blocks are not supported yet

错误原因分析 #

构建报错提示Class static blocks are not supported yet，核心问题如下：

• 依赖版本不一致：当前@angular-devkit/core和@angular-devkit/schematics仍停留在7.3.10版本，与Angular 12的CLI版本不兼容，导致构建流程中语法转译逻辑异常。
• 存在过时依赖：@angular/http是Angular 7的废弃依赖，其内部代码可能引入了未被正确转译的ES2022语法（Class static blocks），而Angular 12默认使用的esbuild版本对该语法支持不足。

解决方案 #

1. 统一Angular Devkit依赖版本 #

将@angular-devkit/core和@angular-devkit/schematics升级到与Angular CLI一致的12.2.18版本：

npm install @angular-devkit/core@12.2.18 @angular-devkit/schematics@12.2.18 --save-dev

2. 移除过时的@angular/http依赖 #

Angular 4.3+已使用@angular/common/http替代@angular/http，直接卸载该废弃依赖：

npm uninstall @angular/http

同时检查项目代码，将所有@angular/http的导入替换为@angular/common/http，例如：

// 旧代码
import { Http } from '@angular/http';

// 替换为
import { HttpClient } from '@angular/common/http';

并同步更新服务注入和调用逻辑。

3. 调整esbuild优化配置（可选） #

若前两步执行后仍报错，可在angular.json中调整esbuild的目标环境，确保其支持Class static blocks语法：
在项目生产构建配置中添加esbuild目标设置：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "optimization": {
              "scripts": {
                "esbuild": {
                  "target": "es2019"
                }
              }
            }
          }
        }
      }
    }
  }
}

若问题仍存在，可临时禁用脚本优化（仅用于排查，不建议长期使用）：

"optimization": {
  "scripts": false,
  "styles": true,
  "fonts": true
}

4. 清理依赖并重新安装 #

执行以下命令清理缓存并重新安装依赖，确保版本完全同步：

rm -rf node_modules package-lock.json
npm install

验证 #

完成上述步骤后，重新执行生产构建命令：

ng build --prod

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