App only loads when pressing "menu/options" button on phone

Ionic Framework ionic-v3
#1

Hello :slight_smile: ,
the title may be a little off , I’ll explain better now;
I’ve encountered a problem, that after i build and run the app (right now for android and web) and the splashscreen ends and goes to .hide() state, the app shows a blank page, the current solution is pressing the phone’s menu button (that shows background working apps) and returning to the app… (in web the solution is to enter inspect mode),

anyway, this is the the app.component.ts (constructor):

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    var that = this
  
    platform.ready().then(() => {

      platform.setDir("rtl",true)
      statusBar.styleDefault();
      splashScreen.hide();


      firebase.auth().onAuthStateChanged(function(user) {

        if (user) {
         that.rootPage = TabsPage;
        } else {
          that.rootPage = LoginPage;
        }
      });
    });
  }

thanks

EDIT:
I just viewed the Chrome console, and saw that the app throws this error:
GET http://localhost:8000/screen 404 (Not Found), however reloading/refreshing (i.e going from device mode to web) is solving it (as mentioned previously)

#2

Hi
You need to change this

to this

firebase.auth().onAuthStateChanged(
     (user) => { 
         if (user) { 
             this.nav.setRoot(TabsPage).then(
                        () => this._removeSplashScreen()
                    );
         } else { 
             this.nav.setRoot(LoginPage).then(
                        () => this._removeSplashScreen()
                    );
} 
});

protected _removeSplashScreen() {
     this.statusBar.styleDefault();
     this.splashScreen.hide();
 }
#3

Not resolving my problem.
App still loads white blank page, however, with your solution, going into device mode (or pressing menu on phone) doesn’t fix it.


import { Component } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { LoginPage} from '../pages/login/login';
import * as firebase from 'firebase';
import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any;
  constructor(platform: Platform, public nav: NavController,public statusBar: StatusBar, public splashScreen: SplashScreen) {
    var that = this
  
    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.
      platform.setDir("rtl",true)

      firebase.auth().onAuthStateChanged(
        (user) => { 
            if (user) { 
                that.nav.setRoot(TabsPage).then(
                           () => this._removeSplashScreen()
                       );
            } else { 
                that.nav.setRoot(LoginPage).then(
                           () => this._removeSplashScreen()
                       );
   } 
   });
    
  });


  }

  protected _removeSplashScreen() {
    this.statusBar.styleDefault();
    this.splashScreen.hide();
}

}

this is the whole app.component now , have I done a mistake?

#4

can you remove this line and test if the problem persist? I think that the problem is firebase.

#5

sorry for no replying.
I have tested a new project (no firebase), and the problem still persists …

#6