Side menu declared in a different file. Broken in beta11

Ionic Framework ionic-v3
1

I’m having a problem with the upgrade to beta11 and sidemenu.
I’m declaring the menu template in a different file, not in app.html, that seems to be the problem, but it works in beta 10.

The first time I click in the burger menu, it opens the menu correctly, but when I select an option on it, it navigates correctly but the menu never works again. Although you still see the menu, it doesn’t work.

I’m almost certain that the problem comes from the <ion-nav>. I need this tag in app.html for declaring the rootpage:

<ion-nav [root]="rootPage" ></ion-nav>

But I also need this when declaring the menu template:

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

I think both are incompatible or something like this with the latest changes in this update, but how it could be done in beta11?

This is my code:

app.html

<ion-nav [root]="rootPage" ></ion-nav>

menu.html

<ion-menu id = "menu" [content]="content">

  <ion-toolbar>
    <ion-title>Menu</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

Page1.html

<burguer-menu></burguer-menu>

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page Uno</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding class="page1">

  <h3>Ionic Menu Starter</h3>
  
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>

  <button secondary menuToggle>Toggle Menu</button>

</ion-content>

When I navigate with openPage§ in menu.ts I do it this way:

 openPage(page) {
    this.nav.setRoot(page.component);
}

I have isolated the problem in a Github project for further reference:

https://github.com/bokgeek/Ionic2-Side-Menu

This is a gif explaining the situation:

image

Many thanks in advance!

2

I’m having exactly the same problem after updating to beta11. Did anyone found solution to this problem?

3

@IonicBoK @nadreal1010 The problem seems related to the following issue:

It’s already closed but skimming through the comments it seems like it wasn’t fixed but rather was closed because it couldn’t be reproduced.

I would recommend you to join the discussion there and help reproducing the problem so that it gets fixed.

4

@iignatov Yes, Ignat Ignatov. Still, this problem is not get fixed for me.
I created above issue (i.e. shared by you) on GitHub.

Will looking forward to fixes.

@IonicBoK @nadreal1010 Please add your inputs to above issue so that ionic team might get some useful information from you guys. They will try their better to fix this problem
Happy Coding.

Thanks

5

This problem is fixed now, there is a workaround in a github page @iignatov provided above.

Thanks and Good Luck

6

@nadreal1010 In actual there is a workaround for another problem, but it is kind of similar.

Their problem was if they push to new page from modal or popover then their side-menu get disabled.

But in my and IonicBoK case, we are not using any modal or popover. Still, we are facing a problem of sidemenu disabled after a normal push.

7

@vaibsVB for my sidemenu application it works well.

Try this line of code in app.ts:

openPage(page) {
  this.menu.close();
  this.app.getRootNav().setRoot(page.component);
}
logout() {
    this.menu.close();
    // this.nav.push(LoginPage);
    this.app.getRootNav().push(LoginPage); //both ways work well
  }

Or in any other page use viewController:

 constructor(
        private viewCtrl: ViewController,       
        private app:App){}

    goToTestPage(page){
        this.viewCtrl.dismiss().then(
            (result) => this.app.getRootNav().push(page)
        )       
    }
}
8

Thanks for reply Nadreal1010.

But by using the same this is giving me problem sometimes. I already try this after referred from GitHub comment.

9

Can you be more specific?

10

As I know the code snippet provided by abartolo & lufias at the GitHub issue and snippet provided you above, are the right approach till now for beta-11 sidemenu.

I tried the same. But sometime this works well in my app and sometime sidemenu get disabled. Don’t know why this is happens.
May be I need to perform ionic platform remove ios and ionic platform add ios command and also npm install to get the all latest dependencies. That might work to make my app stable.

Thanks