Ionic View - HTTP

Appflow
1

Having trouble getting the Native HTTP plugin to work from within Ionic View.
If I print out the error of the http get call, I get “plugin_not_installed”

I do see that the plugin is supported: https://ionicframework.com/docs/pro/view.html#plugin-support
My version is: <plugin name="cordova-plugin-advanced-http" spec="^1.10.2" />

So the steps I followed was:

  • Created a new blank ionic project with the latest CLI (Ionic 3)
  • Then linked the project to my Ionic Pro account and ran git push ionic master (no gitignore file)
  • I then deployed the successful build, but when I open Ionic View on my phone and test it I get the above error as soon as I press the button

Does this have anything to do with CORS?
The HTTP call obviously works if I install the apk on my phone.

This is my source code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HTTP } from '@ionic-native/http';

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

  data: any;
  error: any;

  constructor(public navCtrl: NavController, private http: HTTP) {

  }

  getStuff() {

    let url = 'http://myurl.com';

    this.http.get(url, {}, {})
    .then(data => {

      this.data = JSON.parse(data.data);

    })
    .catch(error => {

      this.error = error;

    });

  }

}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="getStuff()">Get Stuff</button>
  <p>Data: {{data}}</p>
  <p>Error: {{error}}</p>
</ion-content>

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HTTP } from '@ionic-native/http';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http'

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

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

bump, anyone have an idea?

3

Hi, @yondermedia

could you try @angular/http

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Toast,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RequestProvider
  ]
})
export class AppModule {}

thanks

4

Hi I ran into the same problem. Using @angular/http did not solve the problem for me. Any other suggestions?

5

So still no solution for this problem … ? :frowning:

Salva.