Ionic 2 HTTP request not working - Angular 2

Question

Hi I'm trying to do a simple Http GET request, but can't get it to work in ionic v2 Beta...

here is my app.js:

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {HTTP_BINDINGS} from 'angular2/http';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [HTTP_BINDINGS],
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {

    });
  }
}

and this is my page1.js:

import {Page} from 'ionic-angular';
import {Http} from 'angular2/http';


@Page({
  templateUrl: 'build/pages/page1/page1.html'
})

export class Page1 {
    constructor(http:Http) {

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

When adding http:Http to the constructor -> constructor(http:Http) the whole app goes blank in browser... And I get an error in Console:

Error: Cannot find module "../page1/page1"

I've also tried this in Page1.js:

export class Page1 {
    constructor() {

    }

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

and then call makeGetRequest() on (click) in page1.html but it returns these exeptions:

EXCEPTION: Error during evaluation of "click"

ORIGINAL EXCEPTION: TypeError: this.http is undefined

please help! :)

-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-

THIS IS THE SOLUTION:

page1.js:

import {Page} from 'ionic-angular';
import {Http} from 'angular2/http';

@Page({
  templateUrl: 'build/pages/page1/page1.html'
})

export class Page1 {
     static get parameters(){
       return [Http];
       }
    constructor(http) {
        this.http = http;

        this.mget = this.http.get("https://httpbin.org/ip")
        .subscribe(data => {
            console.log(data);
        }, error => {
            console.log('faild');
        });
    }
}

app.js:

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import { HTTP_PROVIDERS } from 'angular2/http';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  providers: [HTTP_PROVIDERS],
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {

    });
  }
}

Answer 1

Please try this

export class Page1 {
     static get parameters(){
       return [Http];
       }
    constructor(http) {
        this.http = http;
        this.mget = this.http.get("https://httpbin.org/ip")
        .subscribe(data => {
            var alert = Alert.create({
                title: "Your IP Address",
                subTitle: data.json().origin,
                buttons: ["close"]
            });
            this.nav.present(alert);
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
    }
}

I would recommend you to write the get request inside a separate service and inject it in your page.

Also have a look at this - http://tphangout.com/?p=113

Detailed and simple instructions are given there for making a simple GET request from an Ionic 2 app.

Answer 2

I believe you need to import { HTTP_PROVIDERS } from 'angular2/http'; in your app.js instead of HTTP_BINDINGS and change providers: [HTTP_BINDINGS] to providers: [HTTP_PROVIDERS]

See Angular2 docs