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!

Answer 1

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

Answer 2

Import this in to app.module.ts

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

and add this one in imports

HttpClientModule

Answer 3

In my case there was a need for:

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

instead of just:

@Injectable()
export class FooService { ...