Ionic-framework: Catch not being executed after returning false from ionViewCanEnter

[sebaferreras]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When using the ionViewCanEnter method, according to the docs:

We need to make sure that our navCtrl.push has a catch in order to catch the and handle the error.

• When using Ionic 3.0.1, the catch was being executed after returning false from the ionViewCanEnter: Demo plunker

• When upgrading to 3.1.0, I've noticed that the catch is not being executed anymore: Demo plunker

Expected behavior:
The catch after the this.navController.push(ContactPage) should be executed (or maybe the docs should be updated if this is not a bug, and has been changed in the latest version).

Steps to reproduce:
The same code works different using Ionic 3.0.0 and 3.1.0

• Ionic 3.0.0: Demo plunker
• Ionic 3.1.0: Demo plunker

Related code:

In both plunkers the code is exactly the same, the only difference is the version of Ionic:

// HomePage
// ----------------------------------------
@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {

  appName = 'Ionic App';

  constructor(public navController: NavController) { }

  public redirectToContactPage(): void {
    this.navController.push(ContactPage)
    .catch(error => { alert('This is the catch...'); })
    .then(result => { alert('This is the then...'); });
  }

}


// ContactPage
// ----------------------------------------
@Component({
  selector: 'page-contact',
  templateUrl: 'app/contact.page.html'
})
export class ContactPage {

  constructor(public navController: NavController) { }

  ionViewCanEnter() {
    return false;
  }

}

[yuricamara]

Hi Ionic team,

I am using Ionic 3.3.0 and I am having this problem described by @sebaferreras too.

What is the status of this issue?

[fracon]

Hi guys,

I'm still having the same problem described by @sebaferreras. I saw this problem was in 3.2.0 milestone but we kept facing this problem in the 3.3.0 version. Is this bug fix in another version milestone?

[stevengunneweg]

Using 3.4.0 and the issue persists

[digaus]

Yes, docs should be updated or this should be fixed... still can make it work with handling the result (returns false on reject and true on resolve).

 this.appCtrl.getActiveNav().setRoot('MyPage')
            .then(
                result => {
                    if(result){
                       // do something when result is true
                    }
                }
            ).catch(
                error => console.log(error) //not working
            );

[dkd051]

Using 3.5.3 and the issue persists

[samgregory88]

Still happening in 3.6.0 😞

[abolajibisiriyu]

Still happening in 3.6.0
But I noticed that .then() logs the return value of the ionViewCanEnter
Here's what i have:

UsersPage

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

  constructor(private navCtrl: NavController){}

  ionViewCanEnter(): boolean | Promise<boolean> {
    let number = Math.floor((Math.random()*10) % 2);
    console.log(number);
    return number === 1;
  }

  loadUser(name: string){
    this.navCtrl.push(UserPage, {name: name});
  }
}

HomePage

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  constructor(public navCtrl: NavController) {}

  goToUsers(){
    this.navCtrl.push(UsersPage)
      .then((response) => console.log(response)) // this logs
      .catch((error) => console.log('Access Denied! Error: '+error)); // this doesn't
  }
}

[leBlob1]

Thanks a lot abolajibisiriyu!

I had the same issue in 3.6.0 and this way you can at least implement a workaround.

It's a shame that this bug reported in April is still not fixed.

[danbucholtz]

We intentionally changed the behavior here. I personally am not a huge fan of the new behavior but too many developers were having a hard time with the old behavior. It should return a resolved promise with the details of why it cannot be pushed now.

Thanks,
Dan

[sheghun]

You can actually make it work.

You work with the value returned using and ifelse statement to check if it's true or false.
Already stated by @abolajibisiriyu

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.