title: NullInjectorError: No provider for HttpClient! Unit Testing a service
body: <p>I have been trying to unit test a basic service today and I keep getting this error: 
  <code>Error: StaticInjectorError[HttpClient]: 
    StaticInjectorError[HttpClient]: 
      NullInjectorError: No provider for HttpClient! "Error: StaticInjectorError".</code> </p>
  
  <p>I have been searching SO and Google for answers and all I find is people suggesting to add HttpClient to your import section of your test bed.</p>
  
  <p>When I add HttpClient to the import section of my test bed I get this error: <code>Error: Unexpected value 'HttpClient' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.</code></p>
  
  <p>Here is my code below</p>
  
  <p>Unit Test File:</p>
  
  <pre><code>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', () =&gt; {
    let injector: TestBed;
    let service: VisitsIngestedService;
    let httpMock: HttpTestingController;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        providers: [VisitsIngestedService]
      });
      injector = getTestBed();
      service = injector.get(VisitsIngestedService);
      httpMock = injector.get(HttpTestingController);
    });
  
    describe('#getVisits', () =&gt; {
      it('should return an Observable&lt;Vists[]&gt;', () =&gt; {
        const dummyVisits = [
          { login: 'John' },
          { login: 'Doe' }
        ];
  
        service.getVisitsIngested("faketen", "fakedate1", "fakedate2").subscribe(visits =&gt; {
          expect(visits.length).toBe(2);
          expect(visits).toEqual(dummyVisits);
        });
      });
    });
  });
  </code></pre>
  
  <p>Service File:</p>
  
  <pre><code>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&lt;any&gt; {
      return this._httpService.get('/api/appInsights/query/' + tenant + '/' + start + '/' + end);
    }
  
  }
  </code></pre>
  
  <p>App.module.ts file:</p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>I am new to Angular and would appriciate any help. Thanks!</p>