ERROR Error: StaticInjectorError(AppModule)[UserformService -> HttpClient]:
AngularAngular4 HttpclientAngular Problem Overview
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!
Angular Solutions
Solution 1 - Angular
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 { }
Solution 2 - Angular
Import this in to app.module.ts
import {HttpClientModule} from '@angular/common/http';
and add this one in imports
HttpClientModule
Solution 3 - Angular
In my case there was a need for:
@Injectable({
providedIn: 'root' // <- ADD THIS
})
export class FooService { ...
instead of just:
@Injectable()
export class FooService { ...
Solution 4 - Angular
Simply i have import in appmodule.ts
import { HttpClientModule } from '@angular/common/http';
imports: [
BrowserModule,
FormsModule,
HttpClientModule <<<this
],
My problem resolved
Solution 5 - Angular
import the HttpClientModule in your app.module.ts
import {HttpClientModule} from '@angular/common/http';
...
@NgModule({
...
imports: [
//other content,
HttpClientModule
]
})
Solution 6 - Angular
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
Solution 7 - Angular
There are two possible reasons
-
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.
Solution 8 - Angular
Add HttpClientModule
in your app.module.ts
and try, it will work so sure.
for example
import { HttpModule } from '@angular/http