Http ionic native request crashing iOS application but works fine on Android

Hi Folks ,

@ionic-native/http - It crash the application on iOS device, request code is below. Same thing with the post or put request.

pls help.

this.http.get('url', {} ,{})
  .then(data => {
    console.log(data.data);
  })
  .catch(error => {
    console.log(error.error); 
  });

have you tried doing

ionic cordova platform rm ios

then

ionic cordova platform add ios

Yes, I did multiple times, that did not help. Still, my app crashes when the control goes to HTTP requests.

have you done “ionic doctor check”?

since you didn’t post your actual. here is mine
and yes this works.

here is my native-http.ts

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

/**
 * Generated class for the NativeHttpPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-native-http',
  templateUrl: 'native-http.html',
})
export class NativeHttpPage {
  username: string = 'user';
  password: string = 'password';
  webReturn: any;
  URL: string = '';

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad NativeHttpPage');
  }


  callWebserviceTest1() {
   
    const baseURL = 'https://your_webservice_url'
    const baseParams = 'put=some&params=here';

    let testURL = (baseURL+baseParams);

    this.URL = testURL;

    let authHeader = 'Basic '+btoa(this.username+':'+this.password);

    let headersObj = new Headers();
    headersObj.append('Authorization', authHeader);

    console.log(testURL);
    console.log(authHeader);

    let auth = this.http.getBasicAuthHeader(this.username,this.password);


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

          this.webReturn = data.data;

    }).catch(error => {

      console.log(error.status);
      console.log(error.error); // error message as string
      console.log(error.headers);

      let alert = this.alertCtrl.create({
        title: 'HTTP Error',
        subTitle: error.status,
        message: error,
        buttons: ['Dismiss']
      });
      alert.present();
    });


  }

}

here is native-http.html

<ion-header>

  <ion-navbar>
    <ion-title>native-http</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>WS Calling Page</p>

  <ion-grid>
    <ion-row>
      <ion-col col-2>
        <button ion-button (click)="callWebserviceTest1()">test</button>
      </ion-col>
      <ion-col col-10>
        <p text-wrap>{{URL}}</p>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <p>Result: <br>
          <ion-scroll scrollY="true" scrollX="true">
            <pre>{{ webReturn}}</pre>
          </ion-scroll>

        </p>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

my ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : browser 5.0.1 ios 4.5.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2 
    Node              : v8.6.0
    npm               : 2.15.12 
    OS                : macOS High Sierra
    Xcode             : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : /Users/name-here/Library/Android/sdk

Misc:

    backend : pro


and here is my app.module.ts

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';
import {HTTP} from "@ionic-native/http";
import {NativeHttpPage} from "../pages/native-http/native-http";
import { NguiMapModule} from '@ngui/map';
import {NguiMapPage} from "../pages/ngui-map/ngui-map";
import { AppVersion } from '@ionic-native/app-version';
import {AppVersionPage} from "../pages/app-version/app-version";

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NativeHttpPage,
    NguiMapPage,
    AppVersionPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    NguiMapModule.forRoot({apiUrl: 'https://maps.google.com/maps/api/js?key=Get_Your_Own_Key'})
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    NativeHttpPage,
    NguiMapPage,
    AppVersionPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    HTTP,
    AppVersion


  ]
})
export class AppModule {}

1 Like

Solved it by putting the service call inside platform ready. :slight_smile:

1 Like

Hi,
My application is also crashing when calling ionic native http get request. I also tried to put http request in platoform ready but not working.

1 Like

Did you solve the problem?

i m not using native http plugin. i m using angular http.