page transition animation starts before ionViewWillLeave when using swipe to go back

Bug Report

Ionic version:

[x] 4.0.1

Current behavior:

In 4.0.1. ionViewWillLeave does trigger, but is too late when using swipe to go back. In Ionic 3 ionViewWillLeave will trigger before the page transition animation. Now in Ionic 4 it is triggered after the page transition is started. So the user can drag away the current page and then it will stay that way (leaving translateX at 100%). I am using this in conjunction with a CanDeactivateGuard to prevent a user from leaving a page that is being edited.

Expected behavior:

When you block the possibility to leave a page on ionViewWillLeave (with a CanDeactivateGuard) and a user swipes to go back, the page transition should not have started, because then the user is still able to swipe away the page.

Steps to reproduce:

Create a component that uses CanDeactivateGuard like in the related code. When canLeave is false and you swipe to go back you are still able swipe the page away while the alert is open.

Related code:

this.canLeave is a boolean indicating the user may not leave:

ionViewWillLeave(){
    return this.canDeactivate();
  }

async canDeactivate() {
    if (!this.canLeave) {
      const alert = await this.alertController.create({
        header: 'Annuleren?',
        message: `Weet je zeker dat je annuleren? Alle wijzigingen gaan hiermee verloren`,
        buttons: [{
          text: 'Nee'
        },
        {
          text: 'Ja',
          handler: () => {
            this.canLeave = true;
            this.historyBack();
          }
        }]
      });
      await alert.present();
    }
    return this.canLeave;
  }

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/Users/martijnlutgens/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 6.5.0
   Cordova Platforms     : android 7.0.0, ios 4.3.1
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 6 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v8.12.0 (/Users/martijnlutgens/.nvm/versions/node/v8.12.0/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[1x2x3x4x]

Yes, still happens.

As for me, if it helps anyone, what I did on iOS if I wanted to NOT be able to swipe back is: Simple case: from page1 I go to page2 and I don’t want the user to be able to come back to page1 by swiping.

Page 1: this.router.navigate([/page2, swipeBackBoolValue]); Page 2: in ionViewDidEnter, if swipeBackBoolValue is false (I don’t want to swipe back) I do this.routerOutlet.swipeGesture = false;

You’ll have to import the Router and routerOutlet.

This is just a workaroud because you’ll have to do it on every page you want to disable the swipeBack, but it works.

[chriswep]

But doing cleanup in this function will break any view when an user starts a swipe action and then cancels it.

i have exactly this problem. @liamdebeasi what is the supposed way to deal with this? and specifically - since you merged https://github.com/ionic-team/ionic-framework/issues/19894 into this issue - is there a way to detect a swipe-cancel to recover from a cleanup in ionViewWillLeave?