Wednesday, 12 April 2017

Error: No provider for http in constructor parameter with Ionic

I'm following a tutorial in Portuguese that teaches how to build your first Ionic application.

After installing npm, node.js, angular, Ionic and Cordova using last versions I started writing the code. The code itself it's really simple:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  public feeds: Array<string>;
  private url: string = "https://www.reddit.com/new.json";

  constructor(public navCtrl: NavController, public http: Http) {

    this.http.get(this.url).map(res => res.json()).subscribe(data => {
        this.feeds = data.data.children;
      });
  }
}`

I'm basically consuming the Reddit's API JSON, which can be accessed using the link in "url" variable and it's supposed to return a huge JSON, transform it and store in "feeds". The problem is whenever I serve this ionic app I get this error:

image of the error

I already tried to figure this problem out and discovered that if I erase everything that's inside the constructor I still get the error but if I erase "public http: Http" which is a parameter for the constructor the error is gone.

Looking for solutions I saw someone suggestion to add providers to @Component but the tutorial does not say anything about that.

I already tried to reinstall everything but i still get the error.

What you have to do to recreate the error:

  • Install npm at latest version;
  • Install node.js at latest stable version;
  • Install angular at latest version using npm;
  • Install ionic (2.2.2) and cordova (6.5.0) latest version using npm;
  • Create an app using: ionic start MyReader blank --v2 --appname "Best Reader Ever" --id "com.tableless.myreader"
  • Change MyReader/src/pages/home/home.ts content to the script above.

Also if you do like to take a look at the tutorial itself, the link is: https://tableless.com.br/criando-uma-aplicacao-movel-com-ionic-2-e-angular-2-em-dez-passos/



via vitorfgd

No comments:

Post a Comment