Ionic 2 - Nav undefined

Question

I'm trying to add navigation to the app.component.ts file in my Ionic 2 application. For some reason I'm receiving an error that nav is not defined.

Adding the NavController is no options either, since it'll say that there's no provider for NavController.

The error(s) I'm receiving are:

Native: tried calling Facebook.browserInit, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator main.js (416,9)
Angular is running in the development mode. Call enableProdMode() to enable the production mode. main.js (3511,5)
Native: tried calling NativeStorage.getItem, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator main.js (416,9)
Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator main.js (416,9)
EXCEPTION: Uncaught (in promise):
TypeError: Unable to get property 'nav' of undefined or null reference TypeError: Unable to get property 'nav' of undefined or null reference
at Anonymous function (http:‍//localhost:8100/build/main.js:125439:17)
at t.prototype.invoke (http:‍//localhost:8100/build/polyfills.js:3:9569)
at onInvoke (http:‍//localhost:8100/build/main.js:38701:21)
at t.prototype.invoke (http:‍//localhost:8100/build/polyfills.js:3:9569)
at e.prototype.run (http:‍//localhost:8100/build/polyfills.js:3:6993)
at Anonymous function (http:‍//localhost:8100/build/polyfills.js:3:4652)
at t.prototype.invokeTask (http:‍//localhost:8100/build/polyfills.js:3:10175)
at onInvokeTask (http:‍//localhost:8100/build/main.js:38692:21)
at t.prototype.invokeTask (http:‍//localhost:8100/build/polyfills.js:3:10175)
at e.prototype.runTask (http:‍//localhost:8100/build/polyfills.js:3:7611)
at i (http:‍//localhost:8100/build/polyfills.js:3:3700)
at invoke (http:‍//localhost:8100/build/polyfills.js:3:11431)
main.js (78327,9)
ORIGINAL STACKTRACE: main.js (78332,13)
Error: Uncaught (in promise):
TypeError: Unable to get property 'nav' of undefined or null reference
TypeError: Unable to get property 'nav' of undefined or null reference at Anonymous function (http:‍//localhost:8100/build/main.js:125439:17)
at t.prototype.invoke (http:‍//localhost:8100/build/polyfills.js:3:9569)
at onInvoke (http:‍//localhost:8100/build/main.js:38701:21)
at t.prototype.invoke (http:‍//localhost:8100/build/polyfills.js:3:9569)
at e.prototype.run (http:‍//localhost:8100/build/polyfills.js:3:6993)
at Anonymous function (http:‍//localhost:8100/build/polyfills.js:3:4652)
at t.prototype.invokeTask (http:‍//localhost:8100/build/polyfills.js:3:10175)
at onInvokeTask (http:‍//localhost:8100/build/main.js:38692:21)
at t.prototype.invokeTask (http:‍//localhost:8100/build/polyfills.js:3:10175)
at e.prototype.runTask (http:‍//localhost:8100/build/polyfills.js:3:7611)
at i (http:‍//localhost:8100/build/polyfills.js:3:3700)
at invoke (http:‍//localhost:8100/build/polyfills.js:3:11431)
at v (http:‍//localhost:8100/build/polyfills.js:3:4856)
at s (http:‍//localhost:8100/build/polyfills.js:3:4283)
at Anonymous function (http:‍//localhost:8100/build/polyfills.js:3:4690)
at t.prototype.invokeTask (http:‍//localhost:8100/build/polyfills.js:3:10175)
at onInvokeTask (http:‍//localhost:8100/build/main.js:38692:21)
at t.prototype.invokeTask (http:‍//localhost:8100/build/polyfills.js:3:10175)
at e.prototype.runTask (http:‍//localhost:8100/build/polyfills.js:3:7611)
at i (http:‍//localhost:8100/build/polyfills.js:3:3700)
at invoke (http:‍//localhost:8100/build/polyfills.js:3:11431)
main.js (78333,13)

The code I'm using:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen, NativeStorage, Facebook } from 'ionic-native';

import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';

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

  rootPage = LoginPage;

  constructor(private platform: Platform) {
    this.InitliazeApp();
  }

  InitliazeApp() {
    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.

      NativeStorage.getItem('user')
        .then(function (data) {
          this.nav.setRoot(HomePage);
          Splashscreen.hide();
        }, function (error) {
          this.nav.setRoot(LoginPage);
          Splashscreen.hide();
        });

      StatusBar.styleDefault();
    });
  }
}

@varunaaruru I'm using Angular2 in my project, any idea where I should be adding this? By adding the NavController in my app.module.ts I'm receiving a lot of errors, so this probably isn't it.. — Peurr
Add nav html here and is this the browser error you have added because it seems cordova is not install.. — mayur

ApriOri ApriOri · Accepted Answer · 2017-07-10T19:07:30

In Ionic2 you usually add navigation by adding NavController to the constructor. it is then injected using dependency injection.

constructor(public navCtrl: NavController)

Ionic 2 - Nav undefined

2 Answers