CODEWITHSUNDEEP
angular
Sai Ram Akuri
Sai Ram Akuri

Reputation: 61

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

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

Upvotes: 6

Views: 40035

Answers (4)

Sundar Garud
Sundar Garud

Reputation: 41

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.

Upvotes: 0

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

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

Upvotes: 21

Árpád Váldazs
Árpád Váldazs

Reputation: 31

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

Upvotes: 1

Mubeen
Mubeen

Reputation: 98

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

Upvotes: 2

Related Questions