Angular 单元测试 NullInjectorError：没有 HttpClient 的提供者！ 错误

Question

我知道这个问题已经被问了一遍又一遍。 我找不到可行的解决方案。 我目前正在向我们的项目添加单元测试，从而修复所有自动生成的测试。

但是在运行 ng test 时，出现以下错误：

NullInjectorError: R3InjectorError(DynamicTestModule)[Service -> HttpClient -> HttpClient]: 
NullInjectorError: No provider for HttpClient!

注意 -> HttpClient -> HttpClient。

当我第一次看到这个时，我认为这一定是一个循环依赖问题。 这导致我创建了一个测试测试模块，我将其导入到我的 TestBed 中。

这是一个失败的示例测试。

import {  TestBed } from '@angular/core/testing';

import { SearchListService } from './search-list.service';
import { ServiceTestingModule } from '@app/testing/service.testing.module';
import { ZhwKnowledgeJourneyService } from '@bkh/services/zhw-knowledge-journey.service';


describe('ZhwKnowledgeJourneyService', () => {

  beforeEach(() => TestBed.configureTestingModule({
    imports: [ServiceTestingModule],
    providers: [SearchListService]
  }));

  it('should be created', () => {
    const service: ZhwKnowledgeJourneyService = TestBed.inject(ZhwKnowledgeJourneyService);
    expect(service).toBeTruthy();
  });
});

这是我的“ServiceTestingModule”

import { NgModule } from '@angular/core';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CommonModule } from '@angular/common';
import {  HttpClientModule } from '@angular/common/http';



@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    HttpClientTestingModule,
  ],
  declarations: [],
  providers: [],
  exports: [HttpClientModule, HttpClientTestingModule]
})
export class ServiceTestingModule { }

我还检查过，“进口”总是在“供应商”之前，但仍然没有运气。

而且我还阅读（并测试了）所有 Github 和 Stackoverflow 帖子，但由于我在那里没有运气，我再次问这个问题。

提前致谢

Answer 1

尝试将 HttpClientModule 添加到提供程序

Answer 2

我也刚从 Angular 开始，遇到了同样的问题。 当您的组件/服务使用HttpClientModule时，您似乎需要在beforeEach function 中导入HttpClientTestingModule 。

这是名为SituationService的服务的示例

    import { TestBed } from '@angular/core/testing';
    import { SituationService } from './situation.service';
    import {HttpClientTestingModule} from '@angular/common/http/testing';
    
    describe('SituationService', () => {
      let service: SituationService;
    
      beforeEach(async () => {
        await TestBed.configureTestingModule({
        imports: [
          HttpClientTestingModule
        ]});
    
        TestBed.configureTestingModule({});
        service = TestBed.inject(SituationService);
      });
    
      it('should be created', () => {
        expect(service).toBeTruthy();
      });
    });

这是一个名为Situation的组件的示例

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SituationComponent } from './situation.component';
import {HttpClientTestingModule} from '@angular/common/http/testing';

describe('SituationComponent', () => {
  let component: SituationComponent;
  let fixture: ComponentFixture<SituationComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ SituationComponent ],
      imports: [
        HttpClientTestingModule
      ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(SituationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

请注意每个beforeEach function 中的imports部分。