title: Angular 4 Error: No provider for HttpClient
body: <p>I am starting a new angular project with the CLI and am running into a no provider for <code>HttpClient</code> error.</p>
  
  <p>I have added <code>HttpClientModule</code> to my module imports which seems to be the usual culprit in this scenario. Not finding a lot online other than that so I am not sure what the issue may be.  </p>
  
  <p>my app.module.ts </p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>and my service </p>
  
  <pre><code>@Injectable()
  export class FlexSearchService {
  
  
      constructor(private http: HttpClient) {}
  
      getSavedSearchResult(index: string, queryName: string, query: string ): Observable&lt;any&gt; {
        const url = `${environment.flexUrl}/${index}/search`;
        const item = new SearchQuery({queryName: queryName, variables: {q: query}});
        return this.http.post(url, item);
      }
  }
  </code></pre>
  
  <p>and ng version gives the following output</p>
  
  <pre><code>@angular/cli: 1.4.2
  node: 6.9.4
  os: darwin x64
  @angular/animations: 4.4.4
  @angular/common: 4.4.4
  @angular/compiler: 4.4.4
  @angular/core: 4.4.4
  @angular/forms: 4.4.4
  @angular/http: 4.4.4
  @angular/platform-browser: 4.4.4
  @angular/platform-browser-dynamic: 4.4.4
  @angular/router: 4.4.4
  @angular/cli: 1.4.2
  @angular/compiler-cli: 4.4.4
  @angular/language-service: 4.4.4
  typescript: 2.3.4
  </code></pre>
  
  <p>my tsconfig</p>
  
  <pre><code>{
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2017",
        "dom"
      ]
    }
  }
  </code></pre>
  
  <p>My test </p>
  
  <pre><code>import { TestBed, inject } from '@angular/core/testing';
  import { HttpClientModule } from '@angular/common/http';
  import { FlexSearchService } from './flex-search.service';
  
  describe('FlexSearchService', () =&gt; {
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        providers: [FlexSearchService, HttpClientModule]
      });
    });
    it('should be created', inject([FlexSearchService], (service: FlexSearchService) =&gt; {
      expect(service).toBeTruthy();
    }));
  </code></pre>
  
  <p>Any help is GREATLY appreciated!</p>