Angular 10导入HttpClientTestingModule致认证服务失效问题

为什么导入HttpClientTestingModule会导致认证服务失效？ #

HttpClientTestingModule是Angular专门为单元测试场景设计的模块，它的核心作用是替换掉Angular原生的HttpClient实现，用一个模拟的HTTP客户端（HttpClientTestingBackend）来拦截所有HTTP请求。这个模拟客户端不会真正向你的后端服务器发送请求，而是等待测试代码手动“触发”响应（比如用flush()方法）。

当你把这个模块导入到app.module.ts（应用的主模块，用于生产/正常运行环境）时，所有依赖HttpClient的服务（包括你的AuthService）都会使用这个模拟客户端。你的login()方法发送的POST请求会被拦截，永远不会到达后端，也不会返回任何响应。这就导致：

• tap操作符里的逻辑完全不会执行，userSubject永远不会更新为登录用户
• 页面因为等待认证完成而挂起，没有报错是因为模拟客户端不会抛出真实的网络错误，只是让Observable处于pending状态

正确的做法 #

1. 仅在测试文件中使用HttpClientTestingModule
   这个模块只应该出现在你的服务/组件的.spec.ts测试文件里，用来测试HTTP请求的逻辑，比如：

   // 比如你的HTTP服务的测试文件
   import { TestBed } from '@angular/core/testing';
   import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
   import { YourHttpService } from './your-http.service';
   
   describe('YourHttpService', () => {
     let service: YourHttpService;
     let httpMock: HttpTestingController;
   
     beforeEach(() => {
       TestBed.configureTestingModule({
         imports: [HttpClientTestingModule], // 只在这里导入
         providers: [YourHttpService]
       });
       service = TestBed.inject(YourHttpService);
       httpMock = TestBed.inject(HttpTestingController);
     });
   
     // ... 你的测试逻辑
   });
   

2. 在应用主模块中保持使用HttpClientModule
   在app.module.ts里，确保导入的是Angular官方提供的用于真实HTTP请求的模块：

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
     imports: [
       // ...其他模块
       HttpClientModule, // 这个才是生产环境要用的
       // 绝对不要在这里导入HttpClientTestingModule！
     ],
     // ...其他配置
   })
   export class AppModule { }
   

额外排查点 #

如果你之前不小心把HttpClientTestingModule加到了主模块里，移除它之后记得重启开发服务器（ng serve），确保模块替换生效。

内容的提问来源于stack exchange，提问作者Gaëtan