Page coming as blank after login in Ionic 2 RC0

I have a login screen as my Root page in my Ionic 2 RC0 app. Once the username and password are validated I am setting HomePage as my Root page in the app. I see in the log the constructor of the page is getting called but the screen is coming as blank. Below is the code:

WelcomePage.ts

@Component({
  templateUrl: 'welcome.html',
})
export class WelcomePage {
  constructor(public nav: NavController, 
              public loginService : LoginService, 
              public labelAndAlerts : AppLabelsAndMessages,
              public globalConstants : GlobalConstants,
              public util : UtilityService) {
    console.log('--> inside WelcomePage');
  }

  public openNextPage(){
    console.log('--> WelcomePage:openNextPage called');
    this.nav.setRoot(HomePage).then(data => {
      console.log('right',data);
    }, (error) => {
        console.log('error',error);
    });
  }

  requestLogin(username,password){
    
    //Validate username
    if(username.value == this.globalConstants.blankString || username.value.trim() == this.globalConstants.blankString){
      this.util.showAlert(this.labelAndAlerts.ALERT_USERNAME_MENDATORY);
      return false;
    }

    //Validate password
    if(password.value == this.globalConstants.blankString || password.value.trim() == this.globalConstants.blankString){
      this.util.showAlert(this.labelAndAlerts.ALERT_PASSWORD_MENDATORY);
      return false;
    }
    
    //this.util.showProgressBar();
    
    let data = {"username" : username.value, "password" : password.value};
    
    if(!this.loginService.isChallenged){
      WLAuthorizationManager.login(this.globalConstants.securityCheckName, data).then(
        () => {//success handler
          this.util.hideProgressBar();
          this.openNextPage();
        },
        () => {//failure handler
          //this.util.hideProgressBar();
          this.util.showAlert(this.labelAndAlerts.ALERT_ERR_REQUEST_PROCESSING_FAILED);
        }
      );
    }else{
      this.loginService.authHandler.submitChallengeAnswer(data);
      this.loginService.isChallenged = false;
    }
  }
}

HomePage.ts

@Component({
  template : 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor() {
    console.log('--> HomePage init called');
  }
}

There is no error coming on the console. Is there something wrong with the code?

1 Like

I have the exact same problem. Looks like navCtrl.setRoot() or push() is not working at this point.

2 Likes

I was facing this with push(), but sunddely it start works.
I have no clue of what I did to works - maybe it’s an intermittent problem -, so I’m pasting my code.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { AuthService } from '../../providers/auth0'

import { HomePage } from '../home/home';


@Component({
	selector: 'page-login',
	templateUrl: 'login.html'
})
export class LoginPage {

	constructor(public navCtrl: NavController, private auth: AuthService) {
		this.redirectTo();
	}

	public get autenticado(): boolean {
		return this.auth.authenticated();
	}

	login() {
		this.auth.lock.show();
	}

	redirectTo() {
		if (this.auth.authenticated()) {
			this.navCtrl.push(HomePage);
		} else {
			this.auth.lock.on('authenticated', authResult => {
				this.navCtrl.push(HomePage);
			});
		}
	}
}

Update
It works within chrome developer tools, otherwise, it goes to the redirect page, blinks and then show a blank page.
Tested with push and setRoot

I opened an inssue

i can confirm i have this issue too!

@fishgrind add a comment in the issue, please

1 Like

update:

Just built the app for android. Same issue there.

another update:

if chrome dev tools device is set to an IOS device there is no problem. If it is set to an Android device the problem is also there in dev tools.

To try to figure out whats is the problem, Auth0 team ask me about the navigation. Can someone help to answer this?

they closed the issue on github claiming it’s an Auth0 problem, I have the same problem and i am not using Auth0.

I posted a workaround on github, and explained I am not using Auth0, hopefully the will reopen it now.

Workaround

my work around is wrapping the setRoot in a timeout for now, this works for me. Let us know if it works for you too and als post your findings to the github issue!

let _self = this; setTimeout(function(){ _self.navCtrl.setRoot(ProfilePage); console.log('timeout finished') }, 300);

1 Like

Your workaround give me the idea that the problems could be related to this issue
Are you using ngAfterViewInit ?

@ecureuill

unfortunately that isnt the issue as i am calling setRoot from a function after receiving data from the json api. But thanks for your input!

I debugged the code and I found that nav.setRoot(HomePage) was getting called from two places one from inside the openNextPage() method and another was from the success method of the security check defined in WLAuthorizationManager argument. I put the appropriate condition in the success handler to avoid calling of setRoot twice and it worked perfectly.