Ionic 2 - Runtime Error No provider for NavController

2
votes

I understand there are similar questions based on this. I believe my scenario is little different. I am trying to check a value in native storage, if it is true. I am trying to navigate to the HomePage. By now after reading couple of articles,I know i wont be able to use the NavController a dependency injector.

I have also tried using @ViewChild , but for that I assume I would need to define a variable in the template that I will use. However I am using an html template. I am new to Ionic 2 and Angular 2, so please go little easy on me :-).

Any other way in which i can accomplish that? Please elaborate a bit more if you guys have a solution to this.

This is my code from app.components.ts (below). Currently I have just commented the navCtrl code.

import { Component,ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
import { NativeStorage } from '@ionic-native/native-storage';
import { NavController } from 'ionic-angular';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html',

})
export class ClassetteApp {
  @ViewChild("appNav") nav: NavController;
  rootPage:any = LoginPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private nativeStorage : NativeStorage) {
    platform.ready().then(() => platform.ready().then(() => {
       this.nativeStorage.getItem("userId").then(function(data){
        this.nav.push(HomePage);
        },function(error){
         this.nav.push(LoginPage);
        })
      statusBar.styleDefault();
      splashScreen.hide();
    })
    )}
}

here is my app.html. 

<ion-nav #appNav [root]="rootPage"></ion-nav>
2
ionic2
check here You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected. – Suraj Rao
@sebaferreras, thanks for pointing out the app.html, I completely missed that. Now I have implemented @ViewChild, I get another error Uncaught (in promise): TypeError: Cannot read property 'nav' of undefined I get that error only when i add this line of code this.nav.push(LoginPage); to the error function, am I missing something or not using it properly. I would need to redirect to another page when there is an error. Please advise – Arun-
Try by changing navApp to appNav here -> @ViewChild("appNav") nav: NavController; – sebaferreras
Thanks a ton!.. how stupid of me to even ignore that!! – Arun-
Been there, done that lol Please accept suraj's answer so we can close this question :) – sebaferreras

2 Answers

2
votes

check here. You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

You have the wrong id.

@ViewChild('appNav') nav: NavController

It should be the same as the #appNav id you have given in the html.

Lastly you are using a regular function as a callback. The this points to function object instead of the class. So it cannot find nav. Use Arrow function.

this.nativeStorage.getItem("userId").then((data)=>{
        this.nav.push(HomePage);
        },(error)=>{
         this.nav.push(LoginPage);
        })
0
votes

An update to that answer, I found out we can use this below: Make sure you have the latest Ionic version. 3.3.0. Here you don't have to add a variable to your html template.

import { NavController, Platform } from 'ionic-angular';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild('appNav') nav: NavController;
  loginPage: any = LoginPage;

   /* your code */

   SomeFunction(){
   this.nav.push(loginPage);
  }   
}