angular - NullInjectorError : No provider for HttpClient! 单元测试服务

Question

我今天一直在尝试对基本服务进行单元测试，但我不断收到此错误:错误:StaticInjectorError [HttpClient]:
StaticInjectorError [HttpClient]:
NullInjectorError:没有 HttpClient 的提供者! “错误:StaticInjectorError”。

我一直在搜索 SO 和 Google 寻找答案，我发现的只是人们建议将 HttpClient 添加到测试平台的导入部分。

当我将 HttpClient 添加到我的测试平台的导入部分时，我收到此错误:错误:模块“DynamicTestModule”导入的意外值“HttpClient”。请添加@NgModule 注解。

下面是我的代码

单元测试文件:

import { VisitsIngestedService } from '../../../xxxx.App/src/app/Services/GetVisitsIngestedService';
import { HttpModule, BaseRequestOptions } from '../../../xxxx.App/node_modules/@angular/http';
import { MockBackend } from '@angular/http/testing';
import { JsonpModule } from '@angular/http';
import { Jsonp } from '@angular/http';
import { TestBed, getTestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClient } from '@angular/common/http';


describe('VisitsIngestedService', () => {
  let injector: TestBed;
  let service: VisitsIngestedService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [VisitsIngestedService]
    });
    injector = getTestBed();
    service = injector.get(VisitsIngestedService);
    httpMock = injector.get(HttpTestingController);
  });

  describe('#getVisits', () => {
    it('should return an Observable<Vists[]>', () => {
      const dummyVisits = [
        { login: 'John' },
        { login: 'Doe' }
      ];

      service.getVisitsIngested("faketen", "fakedate1", "fakedate2").subscribe(visits => {
        expect(visits.length).toBe(2);
        expect(visits).toEqual(dummyVisits);
      });
    });
  });
});

服务文件:

import { Injectable } from '@angular/core';
import { Visit } from '../Models/Visit';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { HttpClient, HttpParams } from '@angular/common/http';


@Injectable()
export class VisitsIngestedService {

  constructor(private _httpService: HttpClient) { }

  public getVisitsIngested(tenant: string, start: string, end: string): Observable<any> {
    return this._httpService.get('/api/appInsights/query/' + tenant + '/' + start + '/' + end);
  }

}

App.module.ts 文件:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClient } from '@angular/common/http';
import { VisitsIngestedService } from '../../../../CloudMedOps.App/src/app/Services/GetVisitsIngestedService';



@NgModule({
  imports: [BrowserModule, FormsModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule, HttpClient],
  providers: [VisitsIngestedService, HttpClient],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我是 Angular 的新手，希望得到任何帮助。谢谢!

Answer 1

你需要导入

import { HttpClientModule } from '@angular/common/http';

和内部进口

@NgModule({
  imports: [BrowserModule, FormsModule, MatFormFieldModule, MatInputModule, BrowserAnimationsModule, HttpClientModule],
  providers: [VisitsIngestedService],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})