Getting Nav as undefined in root page Ask

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

import { Component, ViewChild, Renderer } from '@angular/core';
import { Platform, Nav, MenuController } from 'ionic-angular';
  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) {
console.log("This is nav object :: ", this.nav);

<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?

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

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

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

I updated the code in the post.

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

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


  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].