Ionic 3 - Cannot navigate to any page that calls HTTP in its constructor

Question

I am working on an Ionic 3 project, and have been trying to use Ionic Native's HTTP (https://ionicframework.com/docs/native/http/). I started out by creating a separate provider that used HTTP, but any page that imported the provider wouldn't load / be navigated to. I didn't understand this, so I tried to use it directly on the page itself, instead of creating a provider. After troubleshooting, I realized that the issue occurred whenever HTTP was called in the constructor. There is no error being thrown when I run it with console logs.

Here is my code:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LocationTracking } from '../../providers/location-tracking';
import firebase from'firebase';
import { HTTP } from '@ionic-native/http';


@IonicPage()
@Component({
  selector: 'page-ad',
  templateUrl: 'ad.html',
})
export class AdPage {
  postId = 0;
  imgURL: any;
  testToBeSent: any;
  childRef: any;
  zipCode: any;

  constructor(public navCtrl: NavController, public navParams: NavParams,public LocationTracking: LocationTracking, private http: HTTP) {}

My goal is to be able to navigate to any page that uses Ionic 3's HTTP plugin, or any page that uses a provider that uses Ionic 3's HTTP plugin.

you need to manually install ionic native components, they do not come built in. Also you might want to try import { Http } from '@angular/http'; instead of native http. — Quad
Make sure that you follow the step : Install the Cordova and Ionic Native plugins: $ ionic cordova plugin add cordova-plugin-http $ npm install --save @ionic-native/http Then Add this plugin to your app's module in providers section — Mankeomorakort

chairmanmow chairmanmow · Accepted Answer · 2017-07-27T22:54:13

Navigating into the documentation and the GitHub page for that project, it looks like the project hasn't been updated in a year and was geared around Angular 1.x based on the guide on their page. So those import statements probably won't work.

Look at this part of the docs : https://github.com/wymsee/cordova-HTTP#usage. That's angular 1 syntax. The part of the docs that say 'not angular JS' might be more relevant to your issue. 'This plugin registers a cordovaHTTP global on window'

Edit: I looked at the docs from the Ionic page and they're more specific to angular 2, nonetheless the project they point to on GitHub hasn't been updated in a year and looks abandoned with outdated docs but ionic's updated their docs but still points to the old project. Anyways, I'd still vet that the library a bit if I were you.

Ionic 3 - Cannot navigate to any page that calls HTTP in its constructor

2 Answers