Ionic ion-nav RootPage’s ionViewDidLoad() Does Not Fire

Ionic navigation provide [root] attribute to set the root page.

MyApp component:

<ion-nav [root]="rootPage"></ion-nav>
export class MyApp {
rootPage: any = StartPage; // This set StartPage as the root page of our app

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

And the StartPage

export class StartPage {
  constructor(private navCtrl: NavController,
              private modalController: ModalController) {
  }

  ionViewDidLoad() {
    console.log('StartPage ionViewDidLoad'); // This does not fire!
  }
}

All works well, except our ionViewDidLoad() in StartPage does not fire!

This is because when we set rootPage properties or present a page with ModalController, class’s constructor and ionViewDidLoad() do not get executed.

It seems like a bug in Ionic framework. For the record this was tested with IOS Simulator on:

  • Ionic Framework 3.8.0
  • Ionic CLI 3.2.0
  • Cordova CLI 7.1.0
  • NPM 3.10.10
  • Node 6.10.3
  • ios-deploy 1.9.2

The Workaround

Insert new page in between MyApp and StartPage, we will call it TransitionPage. Then explicitly set StartPage as the root of NavController.

Continue the code above. This is how modified MyApp look like:

<ion-nav [root]="rootPage"></ion-nav>
export class MyApp {
  rootPage: any = TransitionPage; // Our new transition page

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

This is our new TransitionPage:

export class TransitionPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.navCtrl.setRoot(StartPage); // Manually set StartPage as the root
  }
}

The StartPage does not change, however its ionViewDidLoad() hook now fire as expected.

 

Advertisements