IONIC 4 ion-menu Menu ERROR when opening closing

@mhoxha wrote:

Hello guys,

I hope you are all doing well.

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:

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();
        }
    }

check video: Click here for streamable link

what is causing this?
any solution?

i have placed MENU to app.component.html

this is code:

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

Posts: 1

Participants: 1

Read full topic