Ionic-framework: bug: Lab entering debug mode

[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 ([email protected])
   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.