CODEWITHSUNDEEP
angularangular4-httpclient
Billy
Billy

Reputation: 1067

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

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!

Upvotes: 54

Views: 203482

Answers (9)

lodey
lodey

Reputation: 304

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

import { HttpModule } from '@angular/http

Upvotes: 2

Kelvin Lai
Kelvin Lai

Reputation: 2279

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

Upvotes: 73

Jameesjohn
Jameesjohn

Reputation: 89

import the HttpClientModule in your app.module.ts

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

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

Upvotes: 3

Dan Patil
Dan Patil

Reputation: 801

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';

  1. 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.

Upvotes: 2

Swapnil G Thaware
Swapnil G Thaware

Reputation: 877

There are two reasons for this error

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

enter image description here

2) If you haven't import:

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

If you want then run:

npm install @angular/http

Upvotes: 0

Mir-Ismaili
Mir-Ismaili

Reputation: 17008

In my case there was a need for:

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

instead of just:

@Injectable()
export class FooService { ...

Upvotes: 23

Sudhansu
Sudhansu

Reputation: 151

Simply i have import in appmodule.ts

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

My problem resolved

Upvotes: 15

Piriya Ajay Kumar
Piriya Ajay Kumar

Reputation: 21

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

Upvotes: 2

Ragulan
Ragulan

Reputation: 1711

Import this in to app.module.ts

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

and add this one in imports

HttpClientModule

Upvotes: 33

Related Questions