"ASSERT: _before() should be called while animating"

[alkahtani]

I got this error when i navigate from toggle menu back to Login screen and after i login again and open the toggle menu .

I tried to google about this issue and it seems there is an issue with ion-menu-toggle .
Please find my ionic info below :
`Ionic:

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.0.0
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.2.2
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2

Capacitor:

Capacitor CLI : 1.5.0
@capacitor/core : 1.5.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.14.1 (/usr/local/bin/node)
npm : 6.13.7
OS : macOS Catalina`

[djabif]

Thanks for reporting it.
We are currently working on a fix for this and will be released in the next version of the template (to be released soon 😍)

[agustinhaller]

It seems this issue is originated by the misuse of Ionic page life cycle events. If a page wants to hide the side menu, it should disable the menu on the ionViewDidEnter event (fired when the component routing to has finished animating) instead of relying on the ngOnInit.
Also it should clean itself and enable the menu again in the ionViewDidLeave event.

The code should look something like this:

constructor(public menu: MenuController) { }

ionViewDidEnter(): void {
  this.menu.enable(false);
}

ionViewDidLeave(): void {
  this.menu.enable(true);
}

We will include this fix in the upcoming update.
Again, thank you so much for reporting it.

[alkahtani]

@agustinhaller Many thanks , i really appreciate your instant help ,the fix work like a charm.

[dev-nossos]

@agustinhaller : we are experiencing the same problem, but we are using ionViewDidEnter and ionViewDidLeave.

Any ideas why this might be happening?

[djabif]

Hi @dev-nossos , are you using the latest version of the template? That is 2.2.0

[LeoleUCAB]

Hi! I was plagued by this issue recently, it was caused by my sign out button being on the slide menu.

When I signed out, the animation for the menu closing was slower than the navigation, and as I landed back on the sign in screen, the menu was disabled.

Logging back in right away would not re-enable the menu, and forcing it to be enabled caused the assertion error.

My solution was moving my sign out logic as a callback function that executes when the Promise of this.menu.close() resolves, therefore forcing the app to wait for the animation to end before doing anything else :)

TL;DR, wait for your menu.close() animation to finish before disabling the menu!!

[ebizbuddy]

Is this fixed? I disable the side menu on my app home page and enable it before navigating to other pages. I tried both ionViewWillLeave and ionViewDidLeave for enabling the menu but it does not fix. Tapping the toggle still throws the annoying assert error and menu disappears. If I tap the toggle again then it works without any issues.

[djabif]

Hi @ebizbuddy, yes, this was fixed as proposed in #13 (comment)

Why don't you enable it in ionViewDidEnter() ?

[ebizbuddy]

Hi @djabif, the user requirement is to show the side menu on all app pages except the home page. Hence, we have to disable it as soon as the home page is loaded and enable it as soon as the home page is left. If we have to use ionViewDidEnter then it would be needed in each and every page except home page. It will be tedious and not a good implementation! If the fix works in ionViewDidEnter then why not in ionViewDidLeave?

[OscarCR88]

Hi @ebizbuddy

I also had the same issue, tried the above solution but still the menu will throw the error the first time. In my case I solved it by adding the code in my login component as suggested:

ionViewDidEnter(): void {
  this.menu.enable(false);
}

ionViewDidLeave(): void {
  this.menu.enable(true);
}

and (most important) changed the navigation. I was using the following code to navigate to login (the page that shouldn't display the side menu):
await this.navController.navigateRoot(['/login']);
and I changed to:
this._router.navigateByUrl('/login')
Seems like somehow by using navController, the menu didn't close properly. I hope this solve your problem

[ajgomezrivera]

This is how I was able to fix this: when navigating away, going into the page where t his ASSERT issue happened), I used:
this.menu.close().then(() => {
this.navController.navigateRoot(url);
});

[nelson6e65]

I'm still having this issue if I put an if user is loged in to display or hide some portions of menu.

There is a debugger instruction that breaks the user experience when this error occurs:

debugger; // tslint:disable-line

[nvstdmn]

same, still having issue even after doing the below.

ionViewDidEnter(): void {
this.MenuController.enable(false);
}

ionViewDidLeave(): void {
 this.MenuController.enable(true);
}

I have also tried putting protection as below, the issue still remains.

this.MenuController.close().then(() => {
this.router.navigateByUrl("home");
});

issue is found under debugger; // tslint:disable-line.

[djabif]

Hey, I will check the issue to see if I can reproduce it and will try to find a fix for it.

[nvstdmn]

I notice one thing, say, when a user login (login page) successfully to home (home page). If I enable the menu controller when it leaves out of login page, on the Home page, the menu is shown and is already enabled. However, the moment I tried to click on the menu and the menu pops out, the application freezes.

If I comment out the below ionViewDidLeave, there is no freeze. However, my menu won't pop out. I guess the problem appears because the Menucontroller is activated from the previous page and passed on into another page. But hey, if this is the only way for the menu to pop out on the home page, do I have a choice?

Hope it helps.

ionViewDidEnter(): void {
this.MenuController.enable(false);
}

ionViewDidLeave(): void {
// this.MenuController.enable(true);
}

[mersal-developing]

i solved it by @nvstdmn advice
this.menuCtrl.close('main-menu').then(() => this.router.navigateByUrl('/', { replaceUrl: true }))
because my logout button is on the menu it self
so i make navigation after menu closed

[ShaunBrassell]

Had the same issue when trying to disable side menu when I left the home page, and re-enable it when I navigated back. Turns out if you try disable menu using ionViewDidLeave(), then issue arises due to the disabling happening during the close animation. Solved it by using a simple timeout:

ionViewDidEnter() {
this.menuController.enable(true);
}

ionViewDidLeave() {
setTimeout(() => { // to stop bug as cannot set enable to false whilst it is animating closed
this.menuController.enable(false);
}, 1000);
}