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!

can you make sure `const item = new SearchQuery({queryName: queryName, variables: {q: query}});` is returning a json as its passed in the post request. — Aniruddha Das, Oct 04 '17 at 16:09
@yurzui I added tsconfig. Also, the error is being thrown with my tests. I haven't added the service anywhere yet — mrpotocnik, Oct 04 '17 at 16:15
`the error is being thrown with my tests.` **Why did not you say it in your question???** You should import `HttpClientModule` to your `TestBed.configureTestingModule` — yurzui, Oct 04 '17 at 16:19
@yurzui I apologize for not specifying it was in tests but httpclientmodule is included (I am pasting my test above) — mrpotocnik, Oct 04 '17 at 16:45
For me, it was forgetting to import `HttpClientModule` also in my `service.spec.ts`. — Leo, Nov 14 '17 at 03:15

Kevin Doyon · Accepted Answer · 2018-12-13T20:28:35.373

98

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

edited Dec 13 '18 at 20:28

answered Oct 04 '17 at 16:51

Kevin Doyon

3,048
1
31
36

score 18 · Answer 2 · answered Jun 04 '18 at 14:11

Import HttpClientTestingModule.

In your test:

import { HttpClientTestingModule } from '@angular/common/http/testing';

and in the configureTestingModule of your test, do the following:

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

score 11 · Answer 3 · answered Jan 06 '18 at 19:07

An easier way is to provide it globally....Import the following into app.module.ts like so:

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

and declare it in imports:

  imports: [
    HttpModule,
    HttpClientModule, ...
]

score 3 · Answer 4 · edited Jul 08 '20 at 18:08

3

For this you have to import the following:

import { HttpClientTestingModule } from '@angular/common/http/testing';

And for the spec file in the configureTestingModule of your test, do the following:

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

edited Jul 08 '20 at 18:08

piraces

1,246
2
16
31

answered Jul 08 '20 at 12:03

pooja sharma

31
1

score 0 · Answer 5 · answered Aug 30 '20 at 17:41

0

I've noticed this issue when I was trying to link my angular library locally within my project using the npm link.

Downloading the library from the repository solved my issue.

answered Aug 30 '20 at 17:41

Logan Young

282
1
8

Angular 4 Error: No provider for HttpClient

5 Answers5

Linked