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

Question

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) => { }
      );

Show the app.module.ts code, you must `import {HttpClientModule}` — Prashant Pimpale, Nov 07 '19 at 09:11
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 ]` — Developer, Nov 07 '19 at 09:11
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, Apr 11 '20 at 11:07

score 21 · Answer 1 · edited Mar 28 '21 at 20:45

21

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: [ ]
           })

edited Mar 28 '21 at 20:45

Amirhossein Mehrvarzi

18,024
7
45
70

answered Nov 07 '19 at 09:17

Developer

3,309
2
19
23

1

Hi GaurangDhorda I have already added that code still it is not working – Sai Ram Akuri Nov 07 '19 at 10:59
1

@SaiRamAkuri Did you ever find the solution? – Mike Cole Oct 28 '20 at 14:05
Yeah issue fixed – Sai Ram Akuri Jun 16 '21 at 07:54
this solution is more complete. https://stackoverflow.com/a/55638654/12097072 – stoneshishang Mar 01 '22 at 14:27

score 2 · Answer 2 · answered Mar 19 '20 at 15:05

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[]);
}

score 1 · Answer 3 · answered Jan 27 '21 at 20:05

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

score 0 · Answer 4 · edited Jul 11 '22 at 10:33

0

I had the same problem once, In this case you will have to make sure that you have imported the httpclient module in your app.module.ts file and if any import your component i.e homeComponet in the app.module.ts and add this componet in the providers.

edited Jul 11 '22 at 10:33

JialeDu

6,021
2
5
24

answered Jun 27 '22 at 06:06

Sundar Garud

41
5

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

4 Answers4