No provider for HttpClient

 After upgrading from angular 4.4 to 5.0 and after updating all HttpModule and Http to HttpClientModule I started to get this error.

I also added HttpModule again to be sure it's not due to some dependency but it doesn't resolve the issue

In app.module, I have all correctly set

import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
.
.
.
@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        HttpModule,
        BrowserAnimationsModule,
        FormsModule,
        AppRoutingModule,
.
.
.

I don't know from where this error is coming, or I have no clue how to get inner of it. I also have a warning (put it below too) maybe its related.

Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at _NullInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5665)
    at resolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5953)
    at tryResolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5895)
    at StaticInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5766)
    at resolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5953)
    at tryResolveToken (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5895)
    at StaticInjector.get (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:5766)
    at resolveNgModuleDep (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15328)
    at _createClass (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRlEHwg:15373)
    at _createProviderInstance$1 (vendor.js?v=mekBM8IVBK72-MIZOVSTJizGi_TD_xK3uhPOCRl



To resolve this problem HttpClient is Angular's mechanism for communicating with a remote server over HTTP.
To make HttpClient available everywhere in the app,
  1. open the root AppModule,
  2. import the HttpClientModule from @angular/common/http,
    import { HttpClientModule } from '@angular/common/http';
  3. add it to the @NgModule.imports array.
    imports:[HttpClientModule,  ]

Comments

Post a Comment

Popular posts from this blog

Is there a compatibility list for Angular / Angular-CLI and Node.js?

  Is there a compatibility list for Angular / Angular-CLI and Node.js? Yes, there is a compatibility matrix that indicates which versions of Node.js are compatible with specific versions of Angular and Angular CLI . While Angular itself doesn't directly maintain a formal compatibility matrix, the official Angular documentation and release notes provide guidance on which versions of Node.js are recommended or supported for each version of Angular. Here’s a general compatibility guideline based on the official Angular documentation and past release notes: Angular 15.x.x Recommended Node.js version: 16.x.x or 18.x.x Angular CLI: Same as Angular version compatibility. Angular 14.x.x Recommended Node.js version: 14.x.x or 16.x.x Angular CLI: Same as Angular version compatibility. Angular 13.x.x Recommended Node.js version: 14.x.x or 16.x.x Angular CLI: Same as Angular version compatibility. Angular 12.x.x Recommended Node.js version: 12.x.x or 14.x.x Angular CLI: Same as Angular v...
Read more

Error when trying to inject a service into an angular component "EXCEPTION: Can't resolve all parameters for component", why?

The error message EXCEPTION: Can't resolve all parameters for component usually occurs when Angular is unable to inject a service (or another dependency) into your component, typically due to one of the following reasons: 1. Missing Service in Providers Array If the service that you're trying to inject isn't registered in the component or module's providers array, Angular won't be able to resolve it. Solution: In your component : If the service is used only in the component, ensure that it is listed in the providers array of that component. typescript import { MyService } from './my-service' ; @Component ({ selector : 'app-my-component' , templateUrl : './my-component.component.html' , styleUrls : [ './my-component.component.css' ], providers : [ MyService ] // Ensure the service is here }) export class MyComponent { constructor ( private myService: MyService ) {} } In your module : If the service should be avai...
Read more

How to resolve CORS issue in Angular 12?

I am working on an Angular project and I have login page and during submitting login API, I am facing CORS error. I am attaching screenshot of it also. Any suggestion would be appreciated. API Service . ts : constructor ( private http: HttpClient ) { } httpOptionsPost = { headers : new HttpHeaders ({ 'Content-Type' : 'application/json' , 'Access-Control-Allow-Origin' : '*' , 'Access-Control-Allow-Credentials' : 'true' , 'Access-Control-Allow-Methods' : 'GET, POST, OPTIONS' , 'Access-Control-Allow-Headers' : 'Origin, Content-Type, Accept, X-Custom-Header, Upgrade-Insecure-Requests' , }) }; httpOptionsGet = { headers : new HttpHeaders ({ 'Content-Type' : 'application/json...
Read more