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

【问题标题】：Angular Unit Tests NullInjectorError: No provider for HttpClient! ErrorAngular 单元测试 NullInjectorError：没有 HttpClient 的提供者！错误
【发布时间】：2020-05-08 10:47:08
【问题描述】：

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

但是在运行 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 { }

我也检查过，“imports”总是在“providers”之前，但仍然没有运气。

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

提前致谢

【问题讨论】：

尝试在测试中导入HttpClientTestingModule，不要与HttpClientModule混淆
@MikeS。正如您在我的代码中看到的，我已经这样做了。或者你会改变什么？我也尝试直接导入这个模块。但没有运气。

标签： angular typescript httpclient

【解决方案1】：

我也刚开始使用 Angular 并遇到了同样的问题。当您的组件/服务使用HttpClientModule 时，您似乎需要在beforeEach 函数中导入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 函数中的imports 部分。

【讨论】：

【解决方案2】：

尝试将 HttpClientModule 添加到提供者

【讨论】：