Getting Nav as undefined in root page Ask

Ionic Framework ionic-v3
1

I recently upgraded from Ionic 2 to Ionic 3. As soon as I upgraded, I am getting Nav as undefined in root page.

//app.component.ts
import { Component, ViewChild, Renderer } from '@angular/core';
import { Platform, Nav, MenuController } from 'ionic-angular';
@Component({
  templateUrl: `app.html`
})
export class MyApp {



@ViewChild(Nav) nav : NavController ;
  rootPage: any;
  authHandler : any;
  pages: Array<{title: string, component: any, icon: string}>;
  urls: Array<{title: string, url: string, icon: string}>;
  contact: Array<{title: string, url: string, icon: string}>;

  constructor(public platform: Platform,
          public renderer : Renderer,
          public menu: MenuController,
          public loginService : LoginService,
          public util : UtilityService,
          public statusBar: StatusBar,
          public keyboard: Keyboard) {
this.initializeApp();
console.log("This is nav object :: ", this.nav);
}

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

output in the console:
This is nav object :: undefined

Is something changed in Ionic 3 what I have to do In order to make that work?

2

Why do you need it? What can’t you do just by injecting NavController into the constructor and interacting with that?

3

If I am injecting NavController in the constructor then it iv giving me error saying:No Provider found for NavController.

4

Hmm. I just tried your first syntax in a scratch project and it worked. Can you share your app.module.ts?

5

I updated the code in the post.

6

Not seeing the module, just the component, but the constructor is too early. Try ngOnInit.

7

Now it is giving this error: Failed to navigate: Cannot set property ‘navCtrl’ of undefined

8

WFM:

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

  ngOnInit() {
    console.log('nav is ' + this.nav);
  }
}

prints nav is [object Object].