Angular 4 Error: No provider for HttpClient

Question

I am starting a new angular project with the CLI and am running into a no provider for HttpClient error.

I have added HttpClientModule 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.

my app.module.ts

@NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     HttpClientModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { } 

and my service

@Injectable() export class FlexSearchService {       constructor(private http: HttpClient) {}      getSavedSearchResult(index: string, queryName: string, query: string ): Observable<any> {       const url = `${environment.flexUrl}/${index}/search`;       const item = new SearchQuery({queryName: queryName, variables: {q: query}});       return this.http.post(url, item);     } } 

and ng version gives the following output

@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 

my tsconfig

{   "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"     ]   } } 

My test

import { TestBed, inject } from '@angular/core/testing'; import { HttpClientModule } from '@angular/common/http'; import { FlexSearchService } from './flex-search.service';  describe('FlexSearchService', () => {   beforeEach(() => {     TestBed.configureTestingModule({       providers: [FlexSearchService, HttpClientModule]     });   });   it('should be created', inject([FlexSearchService], (service: FlexSearchService) => {     expect(service).toBeTruthy();   })); 

Any help is GREATLY appreciated!

Answer 1

In your test

TestBed.configureTestingModule({       providers: [FlexSearchService, HttpClientModule]     }); 

It should be

TestBed.configureTestingModule({       imports: [HttpClientModule],       providers: [FlexSearchService]     }); 

or even better (if you want to mock request):

TestBed.configureTestingModule({       imports: [HttpClientTestingModule],       providers: [FlexSearchService]     });