Ionic 4 , side menu not working

dadanasro · September 14, 2019, 5:04pm

Hello guys,
I made an android app with a side menu , it worked fine on the browser but when i tried it on an android device , the menu opens but it never closes.

amarjitsingh · September 15, 2019, 6:08pm

I have app under development with menu and it was working from last 3-4 months. We didn’t touch menu code and all of sudden same code stopped working with same issue as dadanasro reported. I guess some library version could be issue.

IonicGeoff · September 16, 2019, 7:46am

What happens if you create and install the default side-menu app on a device?

i.e. is it reproducible?

dadanasro · September 16, 2019, 8:54am

same thing happen when i installed the default side menu app , the menu opens but it never closes

RaulGM · September 16, 2019, 9:14am

Hi, it would be awesome if you could just copy some code you have, share your ionic info so the problem can be simulated.

dadanasro · September 16, 2019, 9:40am

here’s my ionic info :

here’s my side menu code :

RaulGM · September 16, 2019, 10:20am

your routings.ts would be very helpful as well.

RaulGM · September 16, 2019, 10:28am

Well, this works for me very good.

First, I have the menu on app.component.html

<ion-app>
  <ion-menu side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Title
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle>
          <ion-item lines="none" routerLink="/somePath">
            <ion-icon name="business" slot="start"></ion-icon>
            <ion-label>item 1</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item lines="none" routerLink="/somePath">
            <ion-icon name="checkbox-outline" slot="start"></ion-icon>
            <ion-label>item 2</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item lines="none" (click)="someAction()" button>
            <ion-icon name="exit" slot="start"></ion-icon>
            <ion-label>item 3</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
// and then you set your normal ion-router-outlet 
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

Whenever you want to add the menu button on another .html file, then you just

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>  <!-- see how there are no complicated things here -->
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

dadanasro · September 16, 2019, 10:29am

app-routing.module.ts :

members.module.ts :

RaulGM · September 16, 2019, 10:29am

Let me know if it worked for you. Is very straightforward.

dadanasro · September 16, 2019, 10:34am

i don’t think the problem is in my code , bcz i created a new ionic side-menu project and the same problem occured

Andrey1610 · September 16, 2019, 10:37am

I have the same issue. Few days ago I installed cordova-android-support-gradle-release and firebase tools. After that all my projects stopped work. Even if I start new project side menu not working. I have Mac OS. I tried to move my project to windows and Linux, all of them works fine.

I tried to delete almost everything (npm, nodejs, cordova, ionic, clean cache, manual deleting folders) and install again nodejs, npm, cordove, ionic. No luck. Every new project broken…

RaulGM · September 16, 2019, 10:40am

Please, see how are your nested html tags are.

I don’t use ion-split-pane and works like a charm. Have you tried get rid of it?

Have you tried my code? Does it work for you?

amarjitsingh · September 16, 2019, 12:50pm

I guess, it is environment issue, as i have created new component same your code and i have old working code, but both having same issue now only on android . As i haven’t updated any library on my end so not sure what triggered it.

schngrg · September 16, 2019, 12:55pm

Try if this helps: https://github.com/ionic-team/ionic/issues/19272

IonicGeoff · September 17, 2019, 1:48am

OK, doesn’t help you directly, but I just created the default side-menu app, and installed it on my Android phone and the menu works fine.

I haven’t installed on a mobile device for a little while and I had to update a few resources to get it to build.

Here is the output of my Ionic Info…

Ionic:

   Ionic CLI                     : 5.1.0 (C:\Users\User\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.5

System:

   Android SDK Tools : 26.1.1 (C:\Users\User\AppData\Local\Android\android-sdk)
   NodeJS            : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

EinfachHans · September 17, 2019, 6:13pm

Are you testing on Android Emulator or real Device?

houssemelliti · September 23, 2019, 11:25am

I have the same issue only on Android emulator. It works fine on the browser and on physical devices. Please advise.

jdnichollsc · December 18, 2019, 2:44am

in my case the menu stop working (I can’t disable it from login screen to hide the menu) when I install a web component using Ionic styles too, it’s very odd

mbd1995 · April 23, 2020, 5:47pm

<ion-menu-button (click)=“openMenu()”>
openMenu() {
this.menu.enable(true, “custom”);
this.menu.open(“custom”);
}
this will force the button to open the menu, solved my problem with this