Angular升级后执行ng test报错：__webpack_require__(...).context is not a function

数据老陈

2026-8-11

问题原因

你遇到的__webpack_require__(...).context is not a function错误，核心原因是Angular 14+版本的测试构建工具链变更：

从Angular 14开始，@angular-devkit/build-angular默认使用ESBuild作为测试构建器（替代旧版Webpack构建逻辑），而require.context是Webpack专属API，ESBuild并不支持这个非标准语法。你的src/test.ts文件中大概率存在依赖require.context的代码（比如自动导入所有.spec.ts测试文件），这部分代码在升级后直接失效。

解决方案

方案1：替换`require.context`为ES标准动态导入语法

修改src/test.ts中的自动导入逻辑，用ES模块标准的import.meta.glob替代Webpack专属的require.context：

// 旧代码（Webpack专属）
// const context = require.context('./', true, /\.spec\.ts$/);
// context.keys().forEach(context);

// 新代码（ES标准，兼容ESBuild）
const testModules = import.meta.glob('./**/*.spec.ts', { eager: true });
Object.values(testModules).forEach(module => module);

同时确保tsconfig.spec.json配置支持该语法：

将compilerOptions.module设置为ESNext或ES2020
将compilerOptions.moduleResolution设置为bundler（Angular 15推荐）或node16

方案2：强制回退到Webpack测试构建器

若暂时不想修改代码，可在angular.json中配置测试目标使用旧版Webpack构建器：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:webpack-browser",
          // 保留其他原有测试配置
        }
      }
    }
  }
}

注意：此方案仅为临时兼容手段，Angular官方未来可能逐步淘汰Webpack测试构建器，建议优先采用方案1迁移到标准语法。

额外验证步骤