HTTP Request works on "Ionic serve" but not on phone


#1

I have a quick and dirty app (started with the Ionic tabs template and directly coded on the home page) to check, if a picture is correct and accept or decline it. Not really special.
I send a request to a AWS Lambda function which returns me all the things I need.

And it works on “Ionic Serve”, like it should. But when I run it on my android phone with “ionic run android --device” the requests never have a response / never get fired or anything like this.

I have also implemented an additional button with a quick test. If I click it, I should get a response, but also no response.
Normally I always have an service interface, but for this application I don’t need it.

Can anyone think of any solution to solve this problem?

Here is my HTML code

<ion-header>
      <ion-navbar>
    <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

<ion-content padding>

  <ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
  </ion-refresher>

  <h2>Snaps to check</h2>
  <button ion-button (click)="makeGetRequest()">GET Request</button>
  <div *ngFor="let snap of snaps">
<img [src]="snap.picUrl">
<button ion-button full (click)="send(true, snap)">
  Akzeptieren
</button>
<button ion-button full (click)="send(false, snap)">
  Ablehnen
</button>
  </div>
</ion-content>

And here the Typescript code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import * as io from 'socket.io-client';
import { AlertController } from 'ionic-angular';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  socket: any;
  snaps: any[] = [];
  constructor(public navCtrl: NavController, public http: Http, public alertCtrl: AlertController) {
    //this.socket = io("http://ec2-35-157-45-103.eu-central-1.compute.amazonaws.com:3000"); //to listen
  }

  ionViewDidLoad(){
     this.http.get('https://c7odbulxce.execute-api.eu-central-1.amazonaws.com/ready').map(res => res.json()).subscribe(
      data => {
        this.snaps = data;
      },
      err => {
        console.log(err);
      });
   }

   makeGetRequest() {
        this.http.get("https://httpbin.org/ip")
        .subscribe(data => {
            var alert = this.alertCtrl.create({
                title: "Your IP Address",
                subTitle: data.json().origin,
                buttons: ["close"]
            });
            alert.present();
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }

  send(allowed, snapobj) {
    console.log(snapobj);
    if(allowed) {
      snapobj.allowed = true;
      //this.socket.emit('phoneRequest', snapobj);
      let index = this.snaps.indexOf(snapobj, 0);
      if (index > -1) {
        this.snaps.splice(index, 1);
      }
    } else {
      snapobj.allowed = false;
      //this.socket.emit('phoneRequest', snapobj);
      let index = this.snaps.indexOf(snapobj, 0);
      if (index > -1) {
        this.snaps.splice(index, 1);
      }
    }


  }

  doRefresh(refresher) {
    refresher.complete();
    this.ionViewDidLoad();
  }

}

Can anyone think of what I have done wrong? Why I don’t get any response on the phone?


#2

push.
nobody can help me?


#3

Have you attached the chrome dev tools to the android device and checked the console?
There’s probably an error you’re missing


#4

I’m sorry to ask but how can I attach them?
Is this something with remote debugging, chrome://inspect and so on.


#5

Thanks.
I finally got the remote debugging.

can anybody help me with this? why can’t the device find my aws lambda? does anyone know?
and also an error:


polyfills.js:3 XHR finished loading: GET “https://c7odbulxce.execute-api.eu-central-1.amazonaws.com/ready”.
e @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
e.scheduleMacroTask @ polyfills.js:3
(anonymous) @ polyfills.js:3
send @ VM43:3
(anonymous) @ main.js:54175
Observable.subscribe @ main.js:5497
Observable._subscribe @ main.js:5555
MapOperator.call @ main.js:104470
Observable.subscribe @ main.js:5494
HomePage.ionViewDidLoad @ main.js:56198
HomePage.doRefresh @ main.js:56239
View_HomePage0.handleEvent_11 @ component.ngfactory.js:230
(anonymous) @ main.js:94123
schedulerFn @ main.js:34029
SafeSubscriber.__tryOrUnsub @ main.js:44122
SafeSubscriber.next @ main.js:44071
Subscriber._next @ main.js:44024
Subscriber.next @ main.js:43988
Subject.next @ main.js:19471
EventEmitter.emit @ main.js:34009
Refresher._beginRefresh @ main.js:41035
Refresher._onMoveInZone @ main.js:40997
(anonymous) @ main.js:40976
t.invoke @ polyfills.js:3
onInvoke @ main.js:34817
t.invoke @ polyfills.js:3
e.run @ polyfills.js:3
NgZone.run @ main.js:34707
Refresher._onMove @ main.js:40975
main.js:56201 Response {_body: “”, status: 404, ok: false, statusText: “Not Found”, headers: Headers…}

will now try to fix it.
thanks for your help. will also help me in future :slight_smile: