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!

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
– yurzui, Commented Oct 4, 2017 at 16:19
For me, it was forgetting to import HttpClientModule also in my service.spec.ts. — LeoTM
– LeoTM, Commented Nov 14, 2017 at 3:15

Kevin Doyon · Accepted Answer · 2018-12-13 20:28:35Z

141

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, 2018 at 20:28

answered Oct 4, 2017 at 16:51

Kevin Doyon

3,5882 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mwiza · Accepted Answer · 2018-06-04 14:11:10Z

34

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();

answered Jun 4, 2018 at 14:11

Mwiza

9,3593 gold badges53 silver badges44 bronze badges

2 Comments

Jörg Vollmer Over a year ago

Yes, the line imports: [HttpClientTestingModule] is crucial.

Sarjerao Ghadage Over a year ago

this should be an accepted answer

Mike Axle · Accepted Answer · 2018-01-06 19:07:43Z

12

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, ...
]

answered Jan 6, 2018 at 19:07

Mike Axle

1,09711 silver badges25 bronze badges

Comments

piraces · Accepted Answer · 2020-07-08 18:08:35Z

9

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 8, 2020 at 18:08

piraces

1,3482 gold badges21 silver badges42 bronze badges

answered Jul 8, 2020 at 12:03

pooja sharma

911 silver badge1 bronze badge

Comments

Raphaël VO · Accepted Answer · 2024-10-09 14:10:17Z

7

For anyone come here after upgrading version of Angular and found out that HttpClientTestingModule is deprecated, you can use provideHttpClient() and provideHttpClientTesting() instead.

        providers: [
            provideHttpClient(),
            provideHttpClientTesting(),
   
        ]

answered Oct 9, 2024 at 14:10

Raphaël VO

2,6704 gold badges22 silver badges34 bronze badges

Comments

Logan Young · Accepted Answer · 2020-08-30 17:41:14Z

1

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, 2020 at 17:41

Logan Young

3852 silver badges9 bronze badges

Collectives™ on Stack Overflow

Angular 4 Error: No provider for HttpClient

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related