I am encountering an issue while attempting to integrate navigation into the app.component.ts file in my Ionic 2 application. The error message indicates that nav is not defined.
Even adding the NavController doesn't solve the problem as it reports there's no provider available for NavController.
The specific errors I'm facing are:
Native: attempted calling Facebook.browserInit, however Cordova is not accessible. Ensure cordova.js is included or run in a device/simulator main.js (416,9)
Angular is currently in development mode. Execute enableProdMode() to switch to production mode. main.js (3511,5)
Native: unsuccessful attempt at calling NativeStorage.getItem, due to Cordova being unavailable. 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. 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 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
... at s (http://localhost:8100/build/polyfills.js:3:4283)
at Anonymous function (http://localhost:8100/build/polyfills.js:3:4690)
... main.js (78333,13)
The code snippet I am 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)
});
StatusBar.styleDefault();
});
}
}