bug: side menu throwing asserts

[rodrigomoretto]

Bug Report

Ionic version:

[x] 4.x

Current behavior: Web preview enters debug mode after trying to access a page from the side menu

Expected behavior: Not enter debug mode. I'm not really sure if that's intended or not.

Steps to reproduce: Trying to access a page through the side menu causes the application to enter debug mode. This happens only on the first time. It just happened on web preview, but didn't test on native run. The debug apparentely points to a file inside node modules. The path is as follows:

node_modules/@ionic/core/dist/esm-es5/chunk-c90aaa66.js

and the line indicated is line 40

var assert = function (actual, reason) {
    if (!actual) {
        var message = 'ASSERT: ' + reason;
        console.error(message);
        debugger; // tslint:disable-line
        throw new Error(message);
    }

It also throws this error during debug: ASSERT: _before() should be called while animating

And this one after debug: Unhandled Promise rejection: ASSERT: _before() should be called while animating ; Zone: ; Task: Promise.then ; Value: Error: ASSERT: _before() should be called while animating

Related code:

var assert = function (actual, reason) {
    if (!actual) {
        var message = 'ASSERT: ' + reason;
        console.error(message);
        debugger; // tslint:disable-line
        throw new Error(message);
    }

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.4 (/home/rodrigo/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.4
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 14 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.8.0)
   native-run  : 0.2.8 (update available: 0.2.9)

System:

   Android SDK Tools : 26.1.1 (/home/rodrigo/Android/Sdk)
   NodeJS            : v10.15.3 (/home/rodrigo/.nvm/versions/node/v10.15.3/bin/node)
   npm               : 6.11.3
   OS                : Linux 4.15

[dimitriscsd]

I see exactly the same error popup every time i debug my app... This is on an actual phone not web or emulator

[aswinaryal]

could this bug be prioritized higher ? it's blocking the production ready application.

[liamdebeasi]

Thanks for the issue. Can you provide some steps to reproduce the issue?

Additionally, those asserts should not be running on production builds, so they shouldn't be blocking apps ready to ship.

[dimitriscsd]

I don't know if they happen on release builds, but when i deploy with 'ionic cordova run android' or if I use the debugger in VSCode, the exception happens every time I use a side menu item.

[liamdebeasi]

Are you using swipe gestures to open/close the menu or are you using the menu button?

[lharrison1224]

I am experiencing the same issue that happens with gesture and the button. I have a login page with the menu disabled using the MenuController. When I remove the line that disables the menu on that page, everything works as expected. I would guess it has something to do with the menu being enabled/disabled. Hope this helps.

[digaus]

I am experiencing the same issue that happens with gesture and the button. I have a login page with the menu disabled using the MenuController. When I remove the line that disables the menu on that page, everything works as expected. I would guess it has something to do with the menu being enabled/disabled. Hope this helps.

Yep exactly... happens when disableing the menu in ionViewWillEnter. Moved the menu disable function into a canActivate guard which solves the issue.

@liamdebeasi To reproduce just create Ionic app with two pages and enable/disable the menu in ionViewWillEnter

[nogamenofun98]

My version is ionic 4.7.1 and also have that error when clicking logout from dashboard and the page return back to login view where the menu will get disabled, I put the menu disable code in the canActivate guard already but the problem still the same.

Below is the gif attachment to show what happen:

This is my canActivate code:

[digaus]

@nogamenofun98

You shoud try to call await this.menu.enable(true) so the menu gets disabled/enabled before navigation the new page renders. Also I seperated the auth guard and the menu guard. I am calling the menu guard when as canActivateChildand the auth guard as canActivate or canLoad.

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivateChild, RouterStateSnapshot, UrlTree } from '@angular/router';
import { MenuController } from '@ionic/angular';

@Injectable({
    providedIn: 'root',
})
export class MenuGuard implements CanActivateChild {

    constructor(private myMenuController: MenuController,
    ) {
    }

    public async canActivateChild(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Promise<boolean | UrlTree> {
        if (state.url === '/login') {
            await this.myMenuController.enable(false, 'homeMenu');
        } else {
            await this.myMenuController.enable(true, 'homeMenu');
        }
        return true;
    }
}

Then you can use it like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AuthGuard } from '../../guards/auth.guard';
import { MenuGuard } from '../../guards/menu.guard';
import { HomePage } from './home.page';

const routes: Routes = [
    {
        canActivate: [AuthGuard],
        canActivateChild: [MenuGuard],
        path: '',

        // move component to children for canActivateChild guard
        children: [
            {
                path: '',
                component: HomePage,
            },
        ],
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class HomePageRoutingModule { }

Also make sure to remove ion-menu-toggle from the logout button.

[nogamenofun98]

@digaus

by removing ion-menu-toggle that wrap the logout button in html, it solved the problem, Thanks~ :D

*I didn't add MenuGuard into the routing.

[derman10]

@digaus

by removing ion-menu-toggle that wrap the logout button in html, it solved the problem, Thanks~ :D

*I didn't add MenuGuard into the routing.

amazing! I Love you! you save my day.

[rgilsimoes]

This still happens in Ionic 5.6 and now it has a "debugger" line on this code:

const assert = (actual, reason) => { if (!actual) { const message = 'ASSERT: ' + reason; console.error(message); debugger; // tslint:disable-line throw new Error(message); } };

Ionic:

Ionic CLI : 6.12.4 (C:\Work\Tools\nvm\v14.0.0\node_modules\@ionic\cli) Ionic Framework : @ionic/angular 5.6.0 @angular-devkit/build-angular : 0.1101.4 @angular-devkit/schematics : 11.2.3 @angular/cli : 11.1.4 @ionic/angular-toolkit : 3.1.0

Capacitor:

Capacitor CLI : 2.4.7 @capacitor/core : 2.4.7

[schnetzi]

We are currently experiencing the same issue and the debugger is stopping the menu opening. Removing the ion-menu-toggle solves the issue but then the menu doesn't hide automatically anymore.

Our installed versions are:

@angular-devkit/build-angular           0.901.14
@angular-devkit/schematics                9.1.14
@angular/cli                              9.1.14 
@angular/common                           9.1.13
@angular/core                             9.1.13
@angular/router                           9.1.13 

@ionic-native/core                        5.15.1
@ionic/angular                             5.5.4
@ionic/angular-toolkit                     2.0.0
@ionic/core                                5.5.4 

I noticed that in the ionic menu-class the line this.afterAnimation(shouldOpen); in async _setOpen is called twice. Once correctly and once with this.isAnimating = false which causes the error.
The weird thing is that the _setOpen-method is only called once. But the above line is called twice. Maybe it is somehow connected with the promise of await this.startAnimation(shouldOpen, animated);

Any ideas or help how to fix that is greatly appreciated.

[mattsteve]

Hey, have been seeing this issue where the debugger statement pauses the app while the inspector is open. Please at the very least remove the debugger statement. That should not be in production code.

Using these dependencies:

"@ionic/core": "5.8.5",
"@ionic/vue": "5.8.5",
"@ionic/vue-router": "5.8.5",

We don't have a <ion-menu-toggle> in our app. The side menu is toggled manually. Seems to occur when the menu is open, and the following sequence of events occurs:

menuController.close('navigation');
router.pop(); // Could be called a number of times depending on how deep the navigation currently is
setTimeout(() => {
    router.replace('/some/route');
}, 50);

[Najam-khan]

@digaus

by removing ion-menu-toggle that wrap the logout button in html, it solved the problem, Thanks~ :D

*I didn't add MenuGuard into the routing.

thanks man you saved my day

[lincolnthree]

Still happening in Ionic 7 when clicking on an ion-menu-button:

ASSERT: _before() should be called while animating
assert @ helpers-c8b0fe32.js:335
afterAnimation @ ion-menu_3.entry.js:475
(anonymous) @ ion-menu_3.entry.js:291
asyncGeneratorStep @ asyncToGenerator.js:3
_next @ asyncToGenerator.js:22
invoke @ zone.js:368
run @ zone.js:127
(anonymous) @ zone.js:1257
invokeTask @ zone.js:402
runTask @ zone.js:171
drainMicroTaskQueue @ zone.js:581
Promise.then (async)
nativeScheduleMicroTask @ zone.js:557
scheduleMicroTask @ zone.js:568
scheduleTask @ zone.js:392
scheduleTask @ zone.js:214
scheduleMicroTask @ zone.js:234
scheduleResolveOrReject @ zone.js:1247
resolvePromise @ zone.js:1184
(anonymous) @ zone.js:1100
(anonymous) @ zone.js:1116
onFinish.oneTimeCallback @ animation-80d2c7ea.js:887
(anonymous) @ animation-80d2c7ea.js:556
afterAnimation @ animation-80d2c7ea.js:555
animationFinish @ animation-80d2c7ea.js:571
animationFinish @ animation-80d2c7ea.js:573
webAnimations.<computed>.onfinish @ animation-80d2c7ea.js:619
Show 26 more frames
12:00:25.074 zone.js:1043 Unhandled Promise rejection: ASSERT: _before() should be called while animating ; Zone: <root> ; Task: Promise.then ; Value: Error: ASSERT: _before() should be called while animating
    at assert (helpers-c8b0fe32.js:337:11) [<root>]
    at Menu.afterAnimation (ion-menu_3.entry.js:475:11) [<root>]
    at :8100/node_modules_ionic_core_dist_esm_ion-menu_3_entry_js.js:336:14 [<root>]
    at Generator.next (<anonymous>) [<root>]
    at asyncGeneratorStep (asyncToGenerator.js:3:1) [<root>]
    at _next (asyncToGenerator.js:22:1) [<root>]
    at :8100/polyfills.js:10455:28 [<root>]
    at drainMicroTaskQueue (zone.js:581:35) [<root>] Error: ASSERT: _before() should be called while animating
    at assert (http://localhost:8100/vendor.js:24602:11) [<root>]
    at Menu.afterAnimation (http://localhost:8100/node_modules_ionic_core_dist_esm_ion-menu_3_entry_js.js:515:60) [<root>]
    at http://localhost:8100/node_modules_ionic_core_dist_esm_ion-menu_3_entry_js.js:336:14 [<root>]
    at Generator.next (<anonymous>) [<root>]
    at asyncGeneratorStep (http://localhost:8100/vendor.js:190701:24) [<root>]
    at _next (http://localhost:8100/vendor.js:190720:9) [<root>]
    at http://localhost:8100/polyfills.js:10455:28 [<root>]
    at drainMicroTaskQueue (http://localhost:8100/polyfills.js:9792:23) [<root>]
a

[DanielNetzer]

Anyone? is this a debugger code in an application? we are using the ion-menu-toggle in a stencil component, and the debugger is triggered :/

[liamdebeasi]

Hi everyone,

I appreciate everyone's patience while we work to resolve this issue. Here is a dev build with a proposed fix if anyone is interested in testing: 7.4.3-dev.11696264821.1755dd6a

Angular

npm install @ionic/angular@7.4.3-dev.11696264821.1755dd6a

React

npm install @ionic/react@7.4.3-dev.11696264821.1755dd6a @ionic/react-router@7.4.3-dev.11696264821.1755dd6a

Vue

npm install @ionic/vue@7.4.3-dev.11696264821.1755dd6a @ionic/vue-router@7.4.3-dev.11696264821.1755dd6a

Vanilla JavaScript

npm install @ionic/core@7.4.3-dev.11696264821.1755dd6a

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28268, and a fix will be available in an upcoming release of Ionic Framework.

[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.