Error: Can't resolve all parameters for HttpHeaders: (?)

Ionic Framework ionic-v3
1

What am I doing wrong? My code as given below is trying to get response from a GET method. However, I am running into this error: Error: Can’t resolve all parameters for HttpHeaders: (?).

I have been struggling with this for 2 days, following the advice on StackOverflow, Ionic forum and others… But I can’t seem to figure out what I am missing…

Inside home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private http: HttpClient, private headers: HttpHeaders) {

    this.headers = new HttpHeaders({ 'Content-Type': 'application/json'});
    this.headers.append('Access-Control-Allow-Origin', '*')
    this.headers.append("Access-Control-Allow-Headers","*");
    this.headers.append('Access-Control-Allow-Methods', 'GET');	
  
    this.httpGet('https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

  }
  httpGet(url) {
	  console.log("you are here");
    this.http.get(url, { headers: this.headers })
      .map(res => res)
      .subscribe(success => {
        alert("success");
      },
      error => {
        alert(error);
      },
      () => {
        alert("DONE!");
      }
    
    )
  }
}

Inside app.module.ts:


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

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';



@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    HttpHeaders,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
2

Remove HttpHeaders from providers array. It will be already set as provider in HttpClientModule.
And also remove the import in the app.module.ts.
On a different note,

 this.headers.append('Access-Control-Allow-Origin', '*')
 this.headers.append("Access-Control-Allow-Headers","*");
 this.headers.append('Access-Control-Allow-Methods', 'GET');

needs to be in server side not in ionic.

3

Thanks for getting back, @surajrao! Those headers.append lines were a copy/mistake error from different code, I removed them from the code.
Now I am getting a different error:

Error: Can’t resolve all parameters for HomePage: ([object Object], [object Object], ?).

And VS Code is also pointing out that it “cannot find the name HttpHeaders”. How do I handle that now?

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private http: HttpClient, private headers: HttpHeaders) {

    this.headers = new HttpHeaders({ 'Content-Type': 'application/json'});

  
    this.httpGet('https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');

  }
  httpGet(url) {
	  console.log("you are here");
    this.http.get(url, { headers: this.headers })
      .map(res => res)
      .subscribe(success => {
        alert("success");
      },
      error => {
        alert(error);
      },
      () => {
        alert("DONE!");
      }
    
    )
  }
}
4

You have imported HttpClientModule instead of HttpHeaders

5

Sorry, I got confused by the misstyping: “home.module.ts.”, should be “app.module.ts” then.

Still doesn’t work… It shows me “NullInjectorError: No provider for HttpHeaders!”

6

Pretend HttpHeaders does not exist. You don’t need to be interacting with it at all, and the way you are doing so makes no sense.

1 Like
7

Ah my apologies… It was a typo