Angular 19项目如何用esbuild替代webpack执行单元测试

问题根源 #

你用应用构建器时，生产构建默认用esbuild，但单元测试默认还是webpack构建器，这就是测试时出现webpack相关导出错误的原因——webpack处理package.json这类JSON模块的逻辑和esbuild不一样，你直接从package.json导入命名导出version不符合它的规则。

全链路用esbuild的具体步骤 #

1. 把测试构建器换成esbuild版 #

打开angular.json，找到项目的test配置块，把builder值从@angular-devkit/build-angular:karma改成@angular-devkit/build-angular:karma-esbuild，这是Angular 19官方支持的esbuild测试构建器：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:karma-esbuild",
          "options": {
            // 保留原有的测试配置项，比如polyfills、tsConfig这些
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }
        }
      }
    }
  }
}

2. 调整package.json导入方式（可选，更规范） #

切换到esbuild后直接导入version能正常运行，但从JSON文件导入命名导出在TypeScript里需要额外配置，更稳妥的是改成默认导入后解构：

import packageJson from '../../package.json';
const { version } = packageJson;

同时在tsconfig.json或tsconfig.spec.json里确保这两个配置为true：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  }
}

3. 验证webpack是否彻底移除 #

先清理缓存再重新跑测试：

# 有clean脚本就执行这个，没有就手动删node_modules/.angular和dist文件夹
npm run clean
ng test

测试运行时控制台会显示Esbuild build complete这类日志，说明测试已经用esbuild构建了。要是之前装过webpack相关依赖，直接执行npm uninstall webpack webpack-cli彻底删掉就行。

额外注意 #

如果切换后遇到奇怪问题，试试把@angular-devkit/build-angular更到最新补丁版：

npm install @angular-devkit/build-angular@latest --save-dev

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