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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s