ERROR Error: StaticInjectorError(AppModule)[UserformService -> HttpClient]:

Question

While trying to add a PrimeNG table I broke my build here: https://github.com/BillyCharter87/Tech-O-Dex-UI/tree/BrokeIt

I recall updating my package.json from TypeScript 2.3.4 to 2.4.0 and it broke due to (I think) the fact that I was using Headers and Http for my POST call. I tried setting it back to 2.3.4 to no avail. I have fixed what I could by adding in:

import { HttpClient, HttpHeaders } from "@angular/common/http";

but still running into the Error I have now for the HttpClient. I have tried importing HttpClient into the providers like so: providers: [HttpClient] for my app.module.ts.

The full error is as follows:

AppComponent.html:9 ERROR Error: StaticInjectorError(AppModule)[HttpClient -> HttpHandler]: 
StaticInjectorError(Platform: core)[HttpClient -> HttpHandler]: 
NullInjectorError: No provider for HttpHandler!

Kelvin Lai · Accepted Answer · 2020-02-04T13:34:50.667

73

Make sure you have imported HttpClientModule instead of adding HttpClient direcly to the list of providers.

See https://angular.io/guide/http#setup for more info.

The HttpClientModule actually provides HttpClient for you. See https://angular.io/api/common/http/HttpClientModule:

Code sample:

import { HttpClientModule, /* other http imports */ } from "@angular/common/http";

@NgModule({
    // ...other declarations, providers, entryComponents, etc.
    imports: [
        HttpClientModule,
        // ...some other imports
    ],
})
export class AppModule { }

edited Feb 04 '20 at 13:34

answered Apr 25 '18 at 03:03

Kelvin Lai

2,209
7
24
26

get is not working if I am changing it to HttpClientModule `public getServices(){ return this.http.get("http://report/abcd"); }` – Kunal Tyagi Feb 04 '20 at 10:53

score 33 · Answer 2 · answered May 18 '18 at 05:40

33

Import this in to app.module.ts

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

and add this one in imports

HttpClientModule

answered May 18 '18 at 05:40

Ragulan

1,677
17
24

Mir-Ismaili · Answer 3 · 2019-03-02T07:59:59.013

23

In my case there was a need for:

@Injectable({
    providedIn: 'root'  // <- ADD THIS
})
export class FooService { ...

instead of just:

@Injectable()
export class FooService { ...

edited Mar 02 '19 at 07:59

answered Feb 01 '19 at 13:16

Mir-Ismaili

13,974
8
82
100

Thanks this reolved my problem <3 – Ghanshyam Singh Jun 29 '19 at 14:34
Thank you good sir, you probably saved me a couple of hours. 1+ – Felipe Centeno Jul 15 '19 at 17:20

score 15 · Answer 4 · edited Dec 07 '18 at 10:12

15

Simply i have import in appmodule.ts

import { HttpClientModule } from '@angular/common/http';
  imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule  <<<this 
  ],

My problem resolved

edited Dec 07 '18 at 10:12

Agilanbu

2,747
2
28
33

answered Dec 07 '18 at 06:53

Sudhansu

151
1
2

score 3 · Answer 5 · answered Nov 05 '19 at 11:19

3

import the HttpClientModule in your app.module.ts

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

...
@NgModule({
...
  imports: [
    //other content,
    HttpClientModule
  ]
})

answered Nov 05 '19 at 11:19

Jameesjohn

79
1
5

Piriya Ajay Kumar · Answer 6 · 2018-09-10T12:48:58.303

2

provide all custom services means written by you in component decorator section Example : providers: [serviceName]

note:if you are using service for exchanging data between components. declare providers: [serviceName] in module level

edited Sep 10 '18 at 12:48

answered Sep 10 '18 at 09:36

Piriya Ajay Kumar

21
3

score 2 · Answer 7 · answered May 27 '19 at 04:56

There are two possible reasons 1. If you are using HttpClient in your service you need to import HttpClientModule in your module file and mention it in the imports array.

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

If you are using normal Http in your services you need to import HttpModule in your module file and mention it in the imports array.

import { HttpModule } from '@angular/http'

By default, this is not available in the angular then you need to install @angular/http

If you wish you can use both HttpClientModule and HttpModule in your project.

score 2 · Answer 8 · edited Apr 26 '20 at 21:49

2

Add HttpClientModule in your app.module.ts and try, it will work so sure. for example

import { HttpModule } from '@angular/http

edited Apr 26 '20 at 21:49

jhenderson2099

956
8
17

answered Apr 25 '20 at 18:03

lodey

174
2
8

score 0 · Answer 9 · answered Mar 05 '19 at 12:44

0

There are two reasons for this error

1) In the array of import if you imported HttpModule twice

2) If you haven't import:

import { HttpModule, JsonpModule } from '@angular/http';

If you want then run:

npm install @angular/http

answered Mar 05 '19 at 12:44

Swapnil G Thaware

799
3
6
19

ERROR Error: StaticInjectorError(AppModule)[UserformService -> HttpClient]:

9 Answers9

Linked