How to fix ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[HomeComponent -> HttpHeaders]

5
votes

While fetching from API call using GET method I am facing problem like this

core.js:6014 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[HomeComponent -> HttpHeaders]: StaticInjectorError(Platform: core)[HomeComponent -> HttpHeaders]: NullInjectorError: No provider for HttpHeaders! NullInjectorError: StaticInjectorError(AppModule)[HomeComponent -> HttpHeaders]: StaticInjectorError(Platform: core)[HomeComponent -> HttpHeaders]: NullInjectorError: No provider for HttpHeaders! at NullInjector.get (core.js:855) at resolveToken (core.js:17513) at tryResolveToken (core.js:17439) at StaticInjector.get (core.js:17265) at resolveToken (core.js:17513) at tryResolveToken (core.js:17439) at StaticInjector.get (core.js:17265) at resolveNgModuleDep (core.js:30392) at NgModuleRef_.get (core.js:31577) at resolveDep (core.js:32142) at resolvePromise (zone-evergreen.js:797) at resolvePromise (zone-evergreen.js:754) at zone-evergreen.js:858 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:39679) at ZoneDelegate.invokeTask (zone-evergreen.js:390) at Zone.runTask (zone-evergreen.js:168) at drainMicroTaskQueue (zone-evergreen.js:559)

Code:

return this.http
      .get('http://localhost/advanced/frontend/web/leftside-menu/get-left-menu')
      .subscribe(
        (result) => { }
      );
3
angular
Show the app.module.ts code, you must import {HttpClientModule} – Prashant Pimpale
have you imported HttpClientModule in app.module.ts? if not then put this line code, import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ ], imports: [ HttpClientModule ] – GaurangDhorda
This was happening with me to, I do added the HttpClientModule but it was not working for me. Later I noticed that in the code, I forgot to mention the Service class created in that particular component in @NgModule({ providers:[ ]) array. After adding it and importing the proper file it was working for me. – Vipin Makde

3 Answers

19
votes

Have you imported HttpClientModule in app.module.ts? if not then put this line code..

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

@NgModule({  
            imports: [ BrowserModule, FormsModule, HttpClientModule ],
            declarations: [ ]
           })
2
votes

Import HttpClientModule in app.module.ts

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

@NgModule({  
   imports: [ BrowserModule, FormsModule, HttpClientModule ],
   declarations: [ ]
})

Import HttpClient in your service.ts file

import { MyModel } from './my-model.model'
export class UserMaterService {
  list: MyModel[];
  constructor(private http: HttpClient) { }
  this.http.get(url).toPromise().then(res => this.stringData = res as listData[]);
}
0
votes

Also, if this appears, check what what you have written in constructor of any component.

for example, i for some reason have put there another component, so that was mistake When i removed that, it started to work

  constructor(
    private chatRoomsService: ChatRoomService,
    private router: Router,
    private route: ActivatedRoute
    private messageComponent: MessageComponent //it has to be erased
  ) { }