Ionic 2 hhtp undefined


#1

Hi all,

I just try Ionic 2 but have some issues with Http.

The I make a : ionic g provider Product

In the files I just change the path of data.json

import {Injectable} from 'angular2/core';
import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';

@Injectable()
export class Product {
  constructor(http: Http) {
    this.http = http;
    this.data = null;
    this.dataUrl = 'http://localhost:8080/data.json';
  }

  load() {
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }

    // don't have the data yet
    return new Promise(resolve => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
      this.http.get(this.dataUrl)
          .map(res => res.json())
          .subscribe(data => {
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          this.data = data;
              console.debug(this.data);
              resolve(this.data);
        });
    });
  }
}

`

In the app.js the console.debug return : 
Product {http: undefined, data: null, dataUrl: "http://localhost:8080/data.json"}data: nulldataUrl:              http://localhost:8080/data.json"http: undefined__proto__: Product




`import {App, IonicApp, Platform} from 'ionic/ionic';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {Product} from './providers/product/product';
import {Http, Headers} from 'angular2/http';
import 'rxjs/add/operator/map';

@App({
  templateUrl: 'build/app.html',
    providers:[Product],
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  constructor(app: IonicApp, platform: Platform) {

    // set up our app
    this.app = app;
    this.platform = platform;
    this.initializeApp();
    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: HelloIonicPage }
    ];

    // make HelloIonicPage the root (or first) page
    this.rootPage = HelloIonicPage;
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // The platform is now ready. Note: if this callback fails to fire, follow
      // the Troubleshooting guide for a number of possible solutions:
      //
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //
      // First, let's hide the keyboard accessory bar (only works natively) since
      // that's a better default:
      //
      //
      // For example, we might change the StatusBar color. This one below is
      // good for light backgrounds and dark text;
      if (window.StatusBar) {
        window.StatusBar.styleDefault();
      }


        var product = new Product();

        console.debug(product);
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.app.getComponent('leftMenu').close();
    // navigate to the new page if it is not the current page
    let nav = this.app.getComponent('nav');
    nav.setRoot(page.component);
  }
}

#2

I think you need to define http, data and dataUrl as class member variables.

http : Http;
data : Object;
dataUrl : string;

You can avoid the “http: Http” definition just changing your constructor to
constructor(private http: Http)

This will auto generate the member variable “http”