bug: IONIC 4 ion-menu Menu ERROR when opening closing

Bug Report

Ionic version: [x] 4.x

Current behavior: I am facing an issue with MENU Controller on IONIC 4 App.

When the user clicks on the MENU and opens it and closes it several times i get errors, also when it logs out and logs back in, and it crashes the app

Expected behavior: IT SHOULD NOT CRASH THE APP SINCE AFTER THE ERROR I CANT DO ANYTHING

Steps to reproduce: I have to refresh the app to continue working

Current behavior: what is causing this? any solution?

i have placed MENU to app.component.html

checkout this video here on streamable: https://streamable.com/ww8bq

Related code:

THIS IS ERROR

helpers-46f4a262.js:44 ASSERT: _before() should be called while animating

Uncaught (in promise) Error: ASSERT: _before() should be called while animating
    at assert (helpers-46f4a262.js:46)
    at Menu.afterAnimation (ion-menu_4-md.entry.js:340)
    at Menu._setOpen (ion-menu_4-md.entry.js:200)

beforeAnimation(shouldOpen) {
        assert(!this.isAnimating, '_before() should not be called while animating');
        // this places the menu into the correct location before it animates in
        // this css class doesn't actually kick off any animations
        this.el.classList.add(SHOW_MENU);
        if (this.backdropEl) {
            this.backdropEl.classList.add(SHOW_BACKDROP);
        }
        this.blocker.block();
        this.isAnimating = true;
        if (shouldOpen) {
            this.ionWillOpen.emit();
        }
        else {
            this.ionWillClose.emit();
        }
    }
    afterAnimation(isOpen) {
        assert(this.isAnimating, '_before() should be called while animating');
        // keep opening/closing the menu disabled for a touch more yet
        // only add listeners/css if it's enabled and isOpen
        // and only remove listeners/css if it's not open
        // emit opened/closed events
        this._isOpen = isOpen;
        this.isAnimating = false;
        if (!this._isOpen) {
            this.blocker.unblock();
        }
        if (isOpen) {
            // add css class
            if (this.contentEl) {
                this.contentEl.classList.add(MENU_CONTENT_OPEN);
            }
            // emit open event
            this.ionDidOpen.emit();
        }
        else {
            // remove css classes
            this.el.classList.remove(SHOW_MENU);
            if (this.contentEl) {
                this.contentEl.classList.remove(MENU_CONTENT_OPEN);
            }
            if (this.backdropEl) {
                this.backdropEl.classList.remove(SHOW_BACKDROP);
            }
            if (this.animation) {
                this.animation.stop();
            }
            // emit close event
            this.ionDidClose.emit();
        }
    }

this is menu code on app.component.html

<ion-app>
  <ion-menu [disabled]="this.profileService.profile.length === 0 || selectedRouter.includes('subscriptions-and-packages')" (ionDidOpen)="openMenu($event)" (ionDidClose)="closeMenu($event)" side="end" menuId="first" contentId="content1">
        <ion-header>
          <ion-toolbar>
            <ion-title>{{ 'menu' | translate }}</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
          <ion-menu-toggle auto-hide="true">
            <ion-item lines="none" (click)="goToEditprprofileFromMenu()">
              <ion-avatar slot="start" style="width: 30px; height: 30px; margin-right: 25px;">
                <img *ngIf="profileService.profile.profile_pic !== null; else noProfilePicFound" src="{{profileImageAPILink}}{{profileService.profile.id}}/{{profileService.profile.profile_pic}}">
                <ng-template #noProfilePicFound>
                  <img src="/assets/new-admify-icons/usersingle.svg">
                </ng-template>
                </ion-avatar>
                <ion-label>{{ 'my_profile' | translate }}</ion-label>
            </ion-item>
            <ion-item (click)="goToSubsciptions()" lines="none">
                <ion-icon slot="start" src="assets/new-admify-icons/subscriptions-active.svg"></ion-icon>
                <ion-label>{{ 'subscriptions' | translate }}</ion-label>
            </ion-item>
            <ion-item lines="none"  (click)="addAFeedback($event)">
              <ion-icon slot="start" color="primary" src="assets/new-admify-icons/feedback.svg"></ion-icon>
              <ion-label>{{ 'feedback' | translate }}</ion-label>
            </ion-item>
        <ion-item lines="none"  (click)="logout()" style="color: black ">
          <ion-icon slot="start" color="danger" src="assets/new-admify-icons/logout-active.svg"></ion-icon>
          <ion-label>{{ 'logout' | translate }}</ion-label>
        </ion-item>
          </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>
  <ion-router-outlet id="content1"></ion-router-outlet>
</ion-app>

Other information:

I HAVE NOT FOUND ANY ISSUES RELATED TO THIS....

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.13 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)

Utility:

   cordova-res (update available: 0.9.0) : 0.8.1
   native-run                            : 0.3.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.14.0 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.3 Build version 11C29


  ─────────────────────────────────────────────────

     Ionic CLI update available: 5.4.13 → 5.4.16
            Run npm i -g ionic to update

[MilotH2]

Sorry again for big late response, I wont be able to provide code since i cant add the codes with the API calls, i tried to remove all the API calls and make a it a simple switch page but then the error disepeared. Sorry about that. Then i started a whole new ionic 5 project and i didn’t see the issue happening anymore. If it happens ill try the solution that @diegocatalao gave. thank you anyway 😃

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