Trouble opening menu after navigation to second page

If i go to another page menu is not opening, i need to refresh the whole page for opening up the menu.
So someone has any idea why it’s happening?

can you share the app.html and new page html code ?

app.component.html

<ion-menu side="start" type="overlay" class="left-menu">

  <ion-header class="head">

    <div class="enappd-header">

      <ion-avatar slot="start" class="profile" style="margin-right: auto;">

        <!-- <img src="../assets/pp.jpg">  -->

        <img [src]="imgSrc">

      </ion-avatar>

    </div>

  </ion-header>

  <ion-content class="app-back" scroll-y="true">

  

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of beginner">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">

            <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label>

                  {{ option.title }}

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        <div *ngIf="p.children && p.module=='sidemenu'">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <div class="option_menu-button" *ngFor="let option of p.children;let i = index">

              <ion-menu-button autoHide="false" menu="end">

                <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>

                  <ion-icon slot="start" [name]="option.icon"></ion-icon>

                  <ion-label>

                    {{ option.title }}

                  </ion-label>

                </ion-item>

              </ion-menu-button>

            </div>

          </div>

        </div>

        <div *ngIf="!p.children">

          <ion-menu-toggle auto-hide="false">

            <ion-item [routerLink]="[p.url]" detail>

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </ion-menu-toggle>

        </div>

      </div>

      <ion-item detail (click)="logout()" class="ion-margin-top">

        <ion-icon slot="start" name="person"></ion-icon>

        <ion-label>

          Logout

        </ion-label>

      </ion-item>

    </ion-list>

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of startup">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">

            <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label>

                  {{ option.title }}

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        <div *ngIf="p.children && p.module=='sidemenu'">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <div class="option_menu-button" *ngFor="let option of p.children;let i = index">

              <ion-menu-button autoHide="false" menu="end">

                <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>

                  <ion-icon slot="start" [name]="option.icon"></ion-icon>

                  <ion-label>

                    {{ option.title }}

                  </ion-label>

                </ion-item>

              </ion-menu-button>

            </div>

          </div>

        </div>

        <div *ngIf="!p.children">

          <ion-menu-toggle auto-hide="false">

            <ion-item [routerLink]="[p.url]" detail>

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </ion-menu-toggle>

        </div>

      </div>

    </ion-list>

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of pro">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <ion-menu-toggle class="ion-menu-toggle" auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label class="menu-label">

                  {{ option.title }} <ion-icon *ngIf="option.device" name="phone-portrait" color="primary">

                  </ion-icon>

                  <ion-icon *ngIf="option.apple" name="logo-apple" color="primary"></ion-icon>

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        

        <div *ngIf="!p.children">

          <div auto-hide="false">

            <ion-item detail [routerLink]="[p.url]">

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </div>

        </div>

      </div>

    </ion-list>


  </ion-content>

</ion-menu>

Newpage.html

<ion-buttons slot="start">

  <ion-menu-button autoHide='false'></ion-menu-button>

</ion-buttons>

<ion-title>Legal</ion-title>
<ion-row style="padding-right:10px; padding-left:10px;">

  <ion-col>

    <p class="ion-text-justify">

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to

      make a type specimen book. It has survived not only five centuries, but also the leap into electronic

      typesetting, remaining essentially unchanged.

    </p>

    <p class="ion-text-justify">

      Lorem Ipsum is simply dummy text of the printing and typesetting industry.

      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

      when an unknown printer took a galley of type and scrambled it to make a type

      specimen book.

    </p>

    <p class="ion-text-justify">

      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in

      some form, by injected humour, or randomised words which don't look even slightly believable. If you are going

      to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of

      text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making

      this the first true generator on the Internet.

    </p>

  </ion-col>

</ion-row>
> 1. <ion-header>
> 2.   <ion-toolbar>
> 3.     <ion-buttons slot="start">
> 4.       <ion-menu-button></ion-menu-button>
> 5.     </ion-buttons>
> 6.      <ion-title class="one"><img src="../assets/img/header.png" style="width:180px" /></ion-title>
> 7.   </ion-toolbar>
> 8. </ion-header>
> 9. <ion-content >
>  here go your newpage.html code
> 10. </ion-content>

Its does not solve my problem

is any error shows in console of browser when you click on sidemenu button?

No.
i’ll explain you in detail when running my app it will open home page if i click on helpcenter named page it will redirect me correctly but if i go to login page it will redirect me there but after login or if i go back wihtout loggedin to application after that menu is not opening for that i need to refresh the whole application than only it will open

you can cross check with helpcenter page as wel but can you share me login.ts code so i can help you.

import { Component, OnInit } from ‘@angular/core’;

import { MenuController, Platform, AlertController } from ‘@ionic/angular’;

import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

import { UtilService } from ‘…/…/services/util/util.service’;

import { AuthenticationService } from ‘…/…/services/firestore/firebase-authentication.service’;

import { IfStmt } from ‘@angular/compiler’;

import { LoadingController } from ‘@ionic/angular’;

import { AuthService } from ‘src/app/services/auth/auth.service’;

import { HttpErrorResponse, HttpClient } from ‘@angular/common/http’;

import { Router } from ‘@angular/router’;

import { User } from ‘…/…/models/auth.model’;

import { GooglePlus } from ‘@ionic-native/google-plus/ngx’;

@Component({

selector: ‘app-login’,

templateUrl: ‘./login.page.html’,

styleUrls: [’./login.page.scss’],

})

export class LoginPage implements OnInit {

emailPattern = “^[a-z0-9._%±]+@[a-z0-9.-]+.[a-z]{2,4}$”;

isLoginError: boolean = false;

user: User;

googleuser: any = {};

constructor(private googlePlus: GooglePlus, private http: HttpClient, private authservice: AuthService,

          private router: Router, private platform: Platform, public loadingController: LoadingController,

          public alertController: AlertController, private splashScreen: SplashScreen, public util: UtilService, 

          private menuCtrl: MenuController, private authServ: AuthenticationService) {

}

ngOnInit() {

}

async presentAlert() {

const alert = await this.alertController.create({

  header: 'Alert',

  subHeader: 'Email or Password is incorrect!!',

  message: 'Pls Enter Valid Email/Password',

  buttons: ['OK']

});

await alert.present();

}

ionViewDidEnter() {

this.menuCtrl.enable(false, 'start');

this.menuCtrl.enable(false, 'end');

this.platform.ready().then(() => {

  this.splashScreen.hide();

});

}

OnSubmit(UserName, Password) {

this.authservice.userAuthentication(UserName, Password).subscribe((data: any) => {      console.log("User login successfully");      

  localStorage.setItem('userToken', data.access_token);

  this.router.navigate(['home']);

  /*console.log("Login Page Token: ",data.access_token);*/      /*console.log("Login Page Token1:",data.accessToken);*/

},

  (err: HttpErrorResponse) => {

    this.presentAlert();        /*this.isLoginError = true;*/

  })

}

googlelogin() {

console.log("GPBC");

this.googlePlus.login({}).then(res => {

  this.googleuser = res;

  this.GoogleGetData();

  this.router.navigate(['home']);

}).catch(err => console.error(err));

}

async GoogleGetData() {

let token = this.googleuser.accessToken;

this.http.get('https://www.googleapis.com/plus/v1/people/me?access_token=' + this.googleuser.accessToken).subscribe((data: any) => {

  this.googleuser.name = data.displayName;

  this.googleuser.image = data.image.url;

  localStorage.setItem('userToken', data.accessToken);

  this.router.navigate(['home']);

})

}

}

after successfully login use navigateByUrl instead navigate

this.router.navigateByUrl(’/home’);

is this solve my menu problem?

i have used in my application navigation working fine. try to use this may be solved your menu problem

i tried it but still menu is not opening…