NullInjectorError: HttpClient 没有提供程序！对服务进行单元测试

Question

我今天一直在尝试对基本服务进行单元测试，但不断收到此错误： Error: StaticInjectorError[HttpClient]: StaticInjectorError[HttpClient]: NullInjectorError: No provider for HttpClient! "Error: StaticInjectorError".

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

当我将 HttpClient 添加到测试平台的导入部分时，出现此错误：Error: Unexpected value 'HttpClient' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.

这是我下面的代码

单元测试文件：

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 ]
})