ion-menu not working ionic side menu is not showing

Question

I am trying to add side menu in ionic application but it's not coming, I am attaching all files please help me out!!

app.html file

<ion-menu [content]="mycontent">
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item (click)=o nLoad(ServicesMessPage)>
                <ion-icon name="quote" item-left></ion-icon>
                Mess
            </button>
            <button ion-item (click)=o nLoad(ServicesLaundryPage)>
                <ion-icon name="quote" item-left></ion-icon>
                Laundry
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #mycontent></ion-nav>

then in app.component.ts I added all necessary imports

app.component.ts file

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = LoginPage;
  @ViewChild('mycontent') nav: NavController
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private menuCtrl: MenuController) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  onLoad(page: any) {
    this.nav.setRoot(page);
    this.menuCtrl.close();
  }
}

in ServicesPage html i included the menu

services.html

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-buttons start>
      <button ion-button name="menu" menuToggle>
      </button>
    </ion-buttons>
    <ion-title>Dashboard</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

Answer 1

For any general *.html file to show the ion-menu, 4 things need to be ensured :

1. ion-menu has 'contentId' field
2. The Above 'contentId' is passed to the sibling html tag as id
3. Sibling html has main tag and class="ion-page"
4. And to toggle the Menu ion-menu-button is used in the Sibling container

Given code, stand alone shows the sidemenu by clicking the menu button.

<ion-menu contentId="mainContent">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
       <!-- write your menu content here-->
 </ion-menu>     
 <div class="ion-page" id = "mainContent" main>
         <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
         </ion-buttons>
             <!-- write your app content here-->
  </div>

Note : Using ion-menu-button is one of the method to toggle the menu screen. You can also use the menuController to change the menu bar as described Here

Answer 2

I was testing your code on my project and its work well, the only thing that i noticed is that you are missing the icon menu in the button

Change this line

<button ion-button name="menu" menuToggle> </button>

for this one in services.html

   <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
   </button>  

with this line the icon of the menu will appear.