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

Ionic Native
1

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); 
  });
2

have you tried doing

ionic cordova platform rm ios

then

ionic cordova platform add ios
3

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

4

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
6

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

1 Like
7

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
8

Did you solve the problem?

9

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