CODEWITHSUNDEEP
angularnavigationionic2
Fernando Del Olmo
Fernando Del Olmo

Reputation: 1450

No provider for NavController

i started an ionic 2 app from the sidemenu starter. Now i want to move the code generated into the app component (the menu) into a folder and write a home component instead. When i run the app it shows me this error:

ORIGINAL EXCEPTION: No provider for NavController!

The code for my app.component is:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { Login } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  nav: NavController;

  constructor(public platform: Platform, nav: NavController) {
    this.nav = nav;
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 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();
    });
  }

  registerUserWithFacebook(){
    console.log('Facebook');
    //this.nav.setRoot(pantryList);
  }

  registerUserWithGoogle() {
    console.log('Google');
    //this.nav.setRoot(pantryList);
  }

  openSignUpPage(){
    console.log('Signup');
    //this.nav.setRoot(Signup);
  }

  openLoginPage(){
    console.log('Login');
    this.nav.push(Login);
  }

  openTermsOfService(){
    console.log('Terms of service');
  }
}

And i want to redirect to my menu (sidemenu) page:

import {Component} from "@angular/core";
import { NavController } from 'ionic-angular';

import { pantryList } from '../pantryList/pantryList';

@Component({
    templateUrl: "login.html"
})
export class Login {

    email: string;
    password: string;

    constructor(public navCtrl: NavController) {
    }

   onLogin() {
      this.navCtrl.setRoot(pantryList);
   }    
}

Upvotes: 8

Views: 9938

Answers (3)

Nagendra Badiganti
Nagendra Badiganti

Reputation: 2269

The above solution works. Apart, In case if you run into the same as me, please check the below.

I got the same error when I accidentally added NavController in the Injectable Provider file. 

@Injectable()
export class UtilsProvider {

  constructor(
    private toastCtrl: ToastController,
    public loadingCtrl: LoadingController,
    public navCtrl: NavController // *** Make sure to remove this line from Providers***
  ) {
    console.log("Hello UtilsProvider");
    if (!this.isDev) console.log("Productions build");
  }
}

Upvotes: 0

Fernando Del Olmo
Fernando Del Olmo

Reputation: 1450

I solved this by a workaround. I was reading and i found this post asking sometinhg similiar.

So i just change my app.html into this:

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

And my app.component into this:

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild('content') nav: Nav;

  rootPage: any = Home;
  ...
}

Now when i redirect in my home page i dont have any problems.

Upvotes: 3

Vladimir Tolstikov
Vladimir Tolstikov

Reputation: 2683

Forced that thing to work in next way

  constructor(
    protected app: App
  ) {

...

  get navCtrl(): NavController {
    return this.app.getActiveNav();
  }

Upvotes: 5

Related Questions