升级Angular12后测试报NullInjectorError无HttpHandler提供者如何解决？

解决方案 #

1. 替换为测试专用HTTP模块 #

单元测试场景无需导入HttpClientModule，改为导入HttpClientTestingModule即可，该模块内置了HttpHandler等所有HTTP相关依赖的测试实现，同时可拦截HTTP请求避免触发真实网络调用，配置示例：

TestBed.configureTestingModule({
  imports: [
    // 替换原有 HttpClientModule
    HttpClientTestingModule
  ],
  // 其余声明、提供者配置保持不变
})

2. 排查SSR依赖冲突 #

项目启用服务端渲染的情况下，需要额外检查测试配置：

• 不要在测试模块中同时导入服务端、浏览器端两套HTTP模块，测试场景统一使用HttpClientTestingModule即可覆盖所有运行环境的HTTP依赖
• 检查全局测试配置（如test.ts）中是否导入了SSR专属模块（如ServerModule、ServerTransferStateModule），移除公共配置中的这部分内容，仅在需要测试SSR专属逻辑的单测文件中单独导入

3. 排查重复声明的HTTP提供者 #

• 检查当前测试的组件、服务的@Component.providers、@Injectable.providers数组中是否单独声明了HttpClient，如有移除该配置，HTTP相关提供者统一从模块级导入即可
• 检查测试模块的providers数组中是否手动添加了HttpClient但未配套声明HttpHandler提供者，如有两种处理方式：要么删除手动声明的HttpClient，要么补充完整依赖配置（更推荐直接使用HttpClientTestingModule，无需手动配置HTTP相关依赖）

4. 清理缓存重试 #

以上配置确认无误仍报错的话，执行如下命令清理缓存后重新运行测试：

# 清理Angular构建缓存
rm -rf .angular
# 清理依赖重装（可选，仅依赖版本冲突时执行）
rm -rf node_modules package-lock.json yarn.lock
npm install
# 重新运行测试
ng test

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