Blank Screen with rootPage

Ionic Framework ionic-v3
1

In app.component.ts file:

public rootPage: any;

ngOnInit(){
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.rootPage = TabsPage;
        } else {
          this.rootPage = Login;
        }
      });
  
  }

It’s just give me blank page without any console errors.

2

You should probably use the NavController to navigate from one page to another one.

3

The logic is already correct for setting the root page. Try to call this function inside the constructor and see if it work.

4

There is an issue opened for this, see

5

I already checked it, still no solution.

6

There is a fixe.
See the discussion in github issue

7

Hello, i always get this problem today
how i can get that fixe ?
thanks so much

8

I just figured out, thats the crosswalk’s problem, when i remove crosswalk, everything is fine

9

I don’t think that it’s just about crosswalk. It happened to me without crosswalk.

10

Still happening in rc.2

11

You shouldn’t conditionally set the rootPage asynchronously. The rootPage is set right away, but if some asynchronous operation is performed first (like checking if a user is authenticated) before determining the rootPage, it’s going to cause issues.

I handle this by setting the root page to the login page, and then on the login page trigger the authentication check within ionViewDidLoad and once it completes, use setRoot to change the page (if necessary).

1 Like
12

Hey Josh,
Glad to see your answer. I tried your way. But it shows the login page about 2-3 seconds even im logged in. After that, it changes to TabsPage. Also, if I logout and turn to Login page with setRoot(), I see tabs on my login page. This was pretty weird.

So I had to create another page which is called “initial-page”. All this does checking authentication and setRoot to Login or TabsPage. It works but it increases boot time. So I’m still looking for the best way.

13

Sure, something needs to display during the 2-3 seconds it takes to do the check. I still like to stick to just doing it with the login page. Usually I will just throw up a “Authenticating…” loading overlay whilst it performs the check, if they are logged in then swap pages, if not then just hide the overlay.

14

Not setting rootPage conditionally worked great! Thanks a lot Josh and also candelibas! You guys saved my life!

15

A good to way to ensure that a conditional rootPage is shown is using ChangeDetectorRef https://angular.io/api/core/ChangeDetectorRef

For example:

constructor(..., cdr: ChangeDetectorRef, ...) {
... some conditions
this.rootPage = 'MyPage';
this.cdr.detectChanges();
1 Like
16

Hola, yo solucioné ese problema de que la aplicación se quedaba con la pantalla en blanco agregando esta línea de código en la página root, en mi caso la página de LOGIN es mi root y justo allí es donde válido si hay una sesión iniciada.

this.navCtrl.setRoot(InicioPage, {}, {animate: true, direction: 'forward', duration: 1000});
17

Hi Josh. I came here while trying to figure out why (or how) I might be able to control the window.open() whilst trying to get token back from a call to OAuth API. It shows my OAuth content fine, but when it returns/redirects to my localhost:8100/null instead of something like localhost/#/some-page Any ideas?