title: Can't inject service in component in Ionic 2
body: <p>I have a simple ionic 2 app. </p>
  
  <p><strong>Created at service</strong></p>
  
  <pre><code>import { Storage } from '@ionic/storage';
  import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import { AlertController } from 'ionic-angular';
  import { NavController, NavParams } from 'ionic-angular';
  import { AgendaPage } from '../pages/agenda/agenda';
  import { LoginPage } from '../pages/login/login';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class Auth {
    constructor(public http: Http, public storage: Storage, public alertCtrl: AlertController, public navCtrl: NavController) {}
  }
  </code></pre>
  
  <p><strong>app.components.ts registration</strong></p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { Nav, Platform } from 'ionic-angular';
  import { StatusBar, Splashscreen } from 'ionic-native';
  
  import { Auth } from '../providers/auth';
  import { Rides } from '../providers/rides';
  
  import { AgendaPage } from '../pages/agenda/agenda';
  import { LoginPage } from '../pages/login/login';
  
  
  @Component({
    templateUrl: 'app.html',
    providers: [Auth, Rides]
  })
  export class MyApp {
    @ViewChild(Nav) nav: Nav;
  
    rootPage: any = LoginPage;
  
    pages: Array&lt;{title: string, component: any}&gt;;
  
    constructor(public platform: Platform) {
      this.initializeApp();
  
      // used for an example of ngFor and navigation
      this.pages = [
        { title: 'Minha Agenda', component: AgendaPage }
      ];
  
    }
  
    initializeApp() {
      this.platform.ready().then(() =&gt; {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        StatusBar.styleDefault();
        Splashscreen.hide();
      });
    }
  
    openPage(page) {
      // Reset the content nav to have just this page
      // we wouldn't want the back button to show in this scenario
      this.nav.setRoot(page.component);
    }
  }
  </code></pre>
  
  <p><strong>Trying to inject it into a component</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, NavParams } from 'ionic-angular';
  import { Auth } from '../../providers/auth';
  
  /*
    Generated class for the Agenda page.
  
    See http://ionicframework.com/docs/v2/components/#navigation for more info on
    Ionic pages and navigation.
  */
  @Component({
    selector: 'page-agenda',
    templateUrl: 'agenda.html',
    providers: [Auth]
  })
  export class AgendaPage {
  
    openRides: any;
  
    constructor(public navCtrl: NavController, public navParams: NavParams, private auth: Auth) {}
  
  }
  </code></pre>
  
  <p>I get the following error:</p>
  
  <blockquote>
    <p>Can't resolve all parameters for AgendaPage: (NavController,
    NavParams, ?).</p>
  </blockquote>
  
  <p>What I find strange is that I have a very similar other component where I can user the service without problems:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, NavParams } from 'ionic-angular';
  import { Auth } from '../../providers/auth';
  
  /*
    Generated class for the Login page.
  
    See http://ionicframework.com/docs/v2/components/#navigation for more info on
    Ionic pages and navigation.
  */
  @Component({
    selector: 'page-login',
    templateUrl: 'login.html',
    providers: [Auth]
  })
  export class LoginPage {
  
      email: string;
      password: string;
  
      constructor(public navCtrl: NavController, public navParams: NavParams, private auth: Auth) {}
  
      login() {
  
      }
  
  }
  </code></pre>
  
  <p>This works perfectly.</p>