title: Ionic 2 - Nav undefined
body: <p>I'm trying to add navigation to the <code>app.component.ts</code> file in my Ionic 2 application. For some reason I'm receiving an error that <code>nav</code> is not defined.</p>
  
  <p>Adding the <code>NavController</code> is no options either, since it'll say that there's no provider for <code>NavController</code>.</p>
  
  <p>The error(s) I'm receiving are:</p>
  
  <blockquote>
    <p>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)<br>
    Angular is running in the development mode. Call enableProdMode() to enable the production mode. main.js (3511,5)<br>
    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)<br>
    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)<br>
    EXCEPTION: Uncaught (in promise):<br>
    TypeError: Unable to get property 'nav' of undefined or null reference   TypeError: Unable to get property 'nav' of undefined or null reference<br>
        at Anonymous function (http:&zwj;//localhost:8100/build/main.js:125439:17)<br>
        at t.prototype.invoke (http:&zwj;//localhost:8100/build/polyfills.js:3:9569)<br>
       at onInvoke (http:&zwj;//localhost:8100/build/main.js:38701:21)<br>
        at t.prototype.invoke (http:&zwj;//localhost:8100/build/polyfills.js:3:9569)<br>
       at e.prototype.run (http:&zwj;//localhost:8100/build/polyfills.js:3:6993)<br>
       at Anonymous function (http:&zwj;//localhost:8100/build/polyfills.js:3:4652)<br>
        at t.prototype.invokeTask (http:&zwj;//localhost:8100/build/polyfills.js:3:10175)<br>
        at onInvokeTask (http:&zwj;//localhost:8100/build/main.js:38692:21)<br>
        at t.prototype.invokeTask (http:&zwj;//localhost:8100/build/polyfills.js:3:10175)<br>
        at e.prototype.runTask (http:&zwj;//localhost:8100/build/polyfills.js:3:7611)<br>
      at i (http:&zwj;//localhost:8100/build/polyfills.js:3:3700)<br>
        at invoke (http:&zwj;//localhost:8100/build/polyfills.js:3:11431)<br>
     main.js (78327,9)<br>
    ORIGINAL STACKTRACE: main.js (78332,13)<br>
    Error: Uncaught (in promise):<br>
    TypeError: Unable to get property 'nav' of undefined or null reference<br>
    TypeError: Unable to get property 'nav' of undefined or null reference at Anonymous function (http:&zwj;//localhost:8100/build/main.js:125439:17)<br>
      at t.prototype.invoke (http:&zwj;//localhost:8100/build/polyfills.js:3:9569)<br>
        at onInvoke (http:&zwj;//localhost:8100/build/main.js:38701:21)<br>
        at t.prototype.invoke (http:&zwj;//localhost:8100/build/polyfills.js:3:9569)<br>
       at e.prototype.run (http:&zwj;//localhost:8100/build/polyfills.js:3:6993)<br>
       at Anonymous function (http:&zwj;//localhost:8100/build/polyfills.js:3:4652)<br>
        at t.prototype.invokeTask (http:&zwj;//localhost:8100/build/polyfills.js:3:10175)<br>
        at onInvokeTask (http:&zwj;//localhost:8100/build/main.js:38692:21)<br>
        at t.prototype.invokeTask (http:&zwj;//localhost:8100/build/polyfills.js:3:10175)<br>
        at e.prototype.runTask (http:&zwj;//localhost:8100/build/polyfills.js:3:7611)<br>
      at i (http:&zwj;//localhost:8100/build/polyfills.js:3:3700)<br>
        at invoke (http:&zwj;//localhost:8100/build/polyfills.js:3:11431)<br>
        at v (http:&zwj;//localhost:8100/build/polyfills.js:3:4856)<br>
        at s (http:&zwj;//localhost:8100/build/polyfills.js:3:4283)<br>
        at Anonymous function (http:&zwj;//localhost:8100/build/polyfills.js:3:4690)<br>
        at t.prototype.invokeTask (http:&zwj;//localhost:8100/build/polyfills.js:3:10175)<br>
        at onInvokeTask (http:&zwj;//localhost:8100/build/main.js:38692:21)<br>
        at t.prototype.invokeTask (http:&zwj;//localhost:8100/build/polyfills.js:3:10175)<br>
        at e.prototype.runTask (http:&zwj;//localhost:8100/build/polyfills.js:3:7611)<br>
      at i (http:&zwj;//localhost:8100/build/polyfills.js:3:3700)<br>
        at invoke (http:&zwj;//localhost:8100/build/polyfills.js:3:11431)<br>
     main.js (78333,13)</p>
  </blockquote>
  
  <p><strong>The code I'm using:</strong></p>
  
  <pre><code>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(() =&gt; {
        // 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();
      });
    }
  }
  </code></pre>