Delaying the assignment of this.rootPage = TabsPage doesn't work

If I place the assignment in the constructor, I see the tabs, but it’s all firing before my other Cordova plugins are initialized.

export class MyApp {
  private rootPage: any = TabsPage;

So I want to delay that assignment until my Cordova plugins are ready. I moved that single assignment statement down into
platform.ready().then() => {
this.rootPage = TabsPage
}

I can see the assignment statement happening, but I’m getting a blank page - not the TabsPage.
Is there something else I need to do here to get the TabsPage to render properly?

-Paul-

Just tested it out and what you’re doing works perfectly for me, so there’s definitely something else wrong with your code that you haven’t posted. Unless it’s just that you are missing a parentheses on your .then.

1 Like

Our “framework” emits a Javascript event on ‘document’ when it finishes loading - we actually are waiting on that event to fire… I’ll keep playing, thanks.

Banged my head against this for a while, and just gave up and forced a workaround.

Scenario:
This code shows the three tabs, but the rootPage constructor fires before my framework SDK is ready, so I get a lot of “undefined” references.

export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform, public renderer: Renderer) {

    renderer.listenGlobal('document', 'mfpjsloaded', () => {
      console.log('--> mfpjsloaded has fired');
      this.MFPInitComplete();  // code that must wait until framework plugins are ready. 
    })

    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.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

This next fragment allows my framework to load properly, but somehow the initial rendering of the tabs gets “swallowed”, and all I get is a blank page.

export class MyApp {
  private rootPage: any;

  constructor(platform: Platform, public renderer: Renderer) {

    renderer.listenGlobal('document', 'mfpjsloaded', () => {
      console.log('--> mfpjsloaded has fired');
      this.MFPInitComplete();  // code that must wait until framework plugins are ready. 
    })

    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.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  MFPInitComplete() {
       this.rootPage = TabsPage;
     }

What I ended up using was this, which works, but I have no idea why:

export class MyApp {
  private rootPage: any;
  private nav: any;

  constructor(platform: Platform, public renderer: Renderer, private app: App) {

    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.

      StatusBar.styleDefault();
      Splashscreen.hide();

    });

    renderer.listenGlobal('document', 'mfpjsloaded', () => {
      console.log('--> mfpjsloaded has fired');
      this.MFPInitComplete()
    })
  }

  MFPInitComplete() {
      this.rootPage = TabsPage;
      this.nav = this.app.getActiveNav();
      this.nav.setRoot( this.rootPage );
   }