Ionic-framework: Side Menu issue after upgrading to Beta 11 (Ionic2)

[vaibsVB]

Hello guys,

Earlier I created a simple project in ionic2 beta-10 version. In beta-10 side menu working properly.

But today I upgraded my project to beta 11 the same code for Side Menu not working. The Navigation drawer from the left side is not working. My most of the navigation is depend upon side-menu in current project.

When I click on navigation drawer button (i.e. three horizontal lines icon) at the upper-left side of the navigation bar, nothing happens.
Also if I drag from left to right on the screen, side menu is not opening.

The side menu is not opening on iPad and ionic serve (i.e. browser) too..

If anyone having such problem after upgrading to beta-11.

Anyone know the solution for this??

Related issue created as topic on ionic forum, below is link for reference
https://forum.ionicframework.com/t/side-menu-issue-after-upgrading-to-beta-11/59865

Thanks in advance.

[mpaland]

Related to #7586

[jgw96]

Hello @vaibsVB are you trying to use the sidemenu from a modal? Thanks for using Ionic!

[mpaland]

@jgw96 do you have an actual plunker template for beta11?

[jgw96]

@mpaland not yet, unfortunately we have ran into some issues involving npmcdn that i am currently working on resolving. Sorry for any hassle this causes.

[vaibsVB]

@jgw96 Thanks.
Hello justin,

actually in my case I'm not used sidemenu from a modal.

My project consists of pure side menu example.

It works fine with ionic2 beta-10. I created this using sidemenu starter template.
But after up-gradation to beta-11 referring to this link https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#200-beta11-2016-08-05.

But after upgradation to beta-11 side menu is not working.

Sorry for little english if you may get confused with my issue and mpaland's (Marco Paland) issue.

But in general we both are facing kind of similar issue.

Thanks in advance.

[jgw96]

Hello @vaibsVB ! Your english is perfectly fine! Unfortunately, I am having an issue reproducing this issue. Would you mind trying a fresh starter app by running ionic start test-app sidemenu --v2 and trying it? Thanks!

[vaibsVB]

Thanks Justin for saying perfect English :) Unfortunately, it's not so good. :)

Coming to issue, currently, I'm trying to find why it is happening with sidemenu in beta-11. Shortly I will create a new starter with side-menu starter. :+1:

Thanks for the reply.
Regards.

[vaibsVB]

@jgw96
Hi Justin,

As you said, I thought to create a fresh project with sidemenu.

But while creating a fresh project there is issue with Ionic CLI.. I am providing log..

$ ionic start demoApp sidemenu --v2 --ts
Creating Ionic app in folder /Users/bista-mac/Documents/demoApp based on sidemenu project
Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic2-starter-sidemenu/archive/master.zip
[=============================] 100% 0.0s
Installing npm packages...
Error with start undefined
Error Initializing app: There was an error with the spawned command: npminstall
There was an error with the spawned command: npminstall
Caught exception:
undefined

I don't know what is happened with my CLI.
I'm sharing my ionic info with you.

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.4
Xcode version: Xcode 7.3.1 Build version 7D1014

with CLI version : 2.0.0-beta.32 previously I created sidemenu project and it was performing well so far.

Kindly look into this and provide some solutions in order to make my CLI stable.

Thank you.

[ilyosdev]

I have the same problem,too pls help with it?

[jgw96]

@vaibsVB Would you mind updating your ionic cli by running sudo npm install ionic -g? The latest version is 2.0.0-beta.36. Thanks!

[vaibsVB]

I tried your command i.e. sudo npm install ionic -g

but now my ionic info shows different information about ionic CLI

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.3 LTS
Node Version: v4.0.0

seems it updated the version of ionic 1

[jgw96]

Hello @vaibsVB , sorry that is my fault. The command should be sudo npm install ionic@beta -g. Very sorry about that.

[vaibsVB]

It's fine justin.. Actuly I also did the mistake by direct copy paste the command suggested by you without any thinking.. :)
After posting a reply I got to know that I inputted command for ionic 1..

So I inserted new command with this @beta added.. and now it is updated to 2.0.0-beta.36.

Thanks for suggested to upgrade to 2.0.0-beta.36.

Will update you, if I found any difficulty further.

Thank you.

[jgw96]

No problem! Are you able to reproduce the issue with a sidemenu starter?

[vaibsVB]

Will check for sidemenu starter issue if in case I found it with this updated CLI and let you know.

Thank you.

[vaibsVB]

Hi @jgw96,

I have updated to Ionic CLI Version: 2.0.0-beta.32 and Ionic Framework Version: 2.0.0-beta.11 as per your guidance. Now my sidemenu is toggling on clicking on toogle button present at top-left navigation bar.

But the thing is when the sidemenu is opened and I clicked anywhere on the screen (except navigation drawer) the navigation drawer is not going to close.

Few times it takes 5-7 seconds to close the navigation drawer after tap on the screen.

[jgw96]

Hello @vaibsVB ! Glad to hear that we are making progress! Quick question, what device are you testing on when you get this issue? Unfortunately i cant seem to reproduce this with any of my sidemenu apps. Thanks!

[vaibsVB]

It's Apple iPad Air.

I'm not able to create snapshot/screen video recording to produce it.

Even though I found that on tap of toggle icon(present at top-left corner on navigation bar) to close navigation drawer it will take time. On browser it works perfectly fine.
Also In beta-10 it was working well.
But now it takes much time to close navigation drawer in beta-11.

[jgw96]

Hello! Would you mind trying our conference demo app https://github.com/driftyco/ionic-conference-app and seeing if you can repro the issue their too? Thanks!

[Barryrowe]

I'm seeing the same issue. We have an application that we started based on the ionic-conference-app and have been upgrading as each beta is released.

What appears to be happening is that the root NavController isn't being retained. If I have my rootPage call

NavController.setRoot(), the menu continues to work.

However, if I present a Modal, and from that Modal do a NavController.setRoot(), the menu appears to be lost. I'm guessing this all retains on a 2nd navigation context since the Modal presents itself now.

//Further issues with sidemenu
Additonally, if the menu is open, and I click on the main page to have it close, it is delayed closing, and then anytime I click on the main page again, the menu drawer is re-opened. Until I use the slide motion to close the menu, all clicks on the page will just toggle the menu.

[Barryrowe]

I just confirmed the menu is broken in the conference app as well. If I am in platformiconic=ios, in chrome. I get the same behavior. When I slide out the menu it slides out fine, but then if I click anywhere, it's a delayed abrupt snap back to closed, and any clicks on the page will cause the menu to open back up. Until I have dragged the menu back to closed from an open position, I cannot click on anything in the main content page.

If I use the menu toggle button during this time, it appears the menu slides too far to the right underneath the content as well..but if I click a couple more times it will toggle "closed" and back open.

I made no modifications to the conference app, I just cloned it, npm installed, and ran

ionic serve --browser chrome

[abartolo]

@Barryrowe I am also having the issue. I am calling NavController.setRoot from a popover and when directed back to other page the menu isn't working.

[vaibsVB]

@jgw96 I replicate ionic-conference-app and check for sidemenu behavior.

In the ionic-conference-app of beta-11 sidemenu's giving same problem (even I cross verified packge.json file, all dependencies are the same but still having an issue).

Hope this will resolve soon.

Thanks.

[overgaardmorten]

Im also experiencing the problem.

On IOS (Iphone 6s,) pressing menu icon the menu is delayed (half a second or so) before showing. Then (sometimes) I have to click the menu items several times before reacting.

I then installed the app on Samsung S7Edge throught Ionic View -> everything is working as expected. So to me there seems to be an issue on IOS.

Hope this will get fixed soon.

Thanks

[jgw96]

Hello all! I am still having trouble reproducing these issues. On my iphone 5, safari, chrome, android 5.1.1, android 6 and android 7 with the latest version of the Conference app running with the ios theme everything seems to be working fine. Would anyone be able to provide a more minimal repo than the ionic-conference-app that i can use to reproduce any of the above stated issues? Thanks!

[Barryrowe]

@jgw96 Hmm, I was consistently getting the issue to appear in the conference app. The steps to reproduce the side menu bugged states with the conference app:

1. run the app with parameters ionicplatform=ios in query string
2. use the slide motion to open the side menu (drag from the left of the screen)
3. Click anywhere on the body of the screen (you should notice a stuttered close)
4. Click anywhere on the body of the screen (you should see a non-animated open of the side menu)
5. Until you drag the side menu closed, all clicks on the body of the page will attempt to toggle the side menu
6. After you've dragged the side menu closed, if you click the menu hamburger icon, the side menu panel opens, but the menu content appears to be hidden under the body of the main content leaving a blank white side panel.
7. Clicking the hamburger icon a couple more times appears to get you back to a "normal" state.

[lufias]

Just upgrade my application to beta11 yesterday. So, here I share some of the screenshot that I think might give hint to what actually happen. Basically, clicking on the menu from other navigated page still trigger the one at the root.

[jgw96]

Thanks everyone for the info! @lufias would you be able to provide a repo with a minimal example that I can use to reproduce this issue? @Barryrowe does your issue happen only when using that string to change the mode in your query? Would you mind trying with just device emulation on chrome emulating an iPhone? Thanks everyone!

[Barryrowe]

@jgw96 I just tested this in chrome with emulation. It appears that everything works fine with the user-agent emulation. Whether iPad/iPhone or an Android device. I also tested without the header emulation and just using localhost:8100, localhost:8100?ionicplatform=ios, localhost:8100?ionicplatform=android. In all of these 3 scenarios the side menu appears to be broken as stated above.

It appears that something is dependent on the User-Agent headers being picked up and applying some styles/events.

[overgaardmorten]

Just did a fresh install of the conference app on my Iphone 6s (ios 9.3.4) delay issue is reproduced as follows:
1) Click menu button in upper left corner (main content slides to the left)
2) Try click the menu button (now at the upper right) right after sliding has ended.
3) You will have to click several times before main content is sliding in to the left again.

The same can be reproduced in
a) IOS simulator running IOS 9.3
b) Iphone 5s (IOS 8.3)

How this helps just a bit :-)

[lufias]

@jgw96 I just created an example repo similar to my screenshot shown before..

https://github.com/lufias/sideMenu

You may try running it on the browser and follow the same step as I told before. Unfortunately (in my case), there's no back button on the browser, so, you shouldn't be a able to do back action to view what happened on the root page (Menu should appear)

So, perhaps you can try to run this on mobile device. I was running it on an android device with crosswalk 19+ plugin installed.

On that note, I was also assigning the root nav into ViewChild in app.ts so that i can do a redirect right off the first page. Wonder if that what make the menu somehow binded to the root.

@ViewChild('myNav') nav

[lufias]

@vaibsVB @jgw96

Installing npm packages...
Error with start undefined
Error Initializing app: There was an error with the spawned command: npminstall
There was an error with the spawned command: npminstall
Caught exception:
undefined

I'm running the latest CLI, beta 37. But, I actually stumbled this error back in beta 22.. I always wonder if this is just some kind of syntax error, that, whoever manage this, forget to remove the space between npm and install? Btw, you can proceed to installation by getting into the app directory, remove node_module folder and proceed with npm install directly from within..

[abartolo]

Not sure if this issue is going in 2 separate issues or both part of same original issue posted.

If I navigate from a popover to another page am 100% able to replicate issue. I work around this issue with the the following:

FROM inside popover
import {NavController, App} from 'ionic-angular'; this.navController.setRoot(MainPage)
TO

import {NavController, App} from 'ionic-angular'; this.app.getRootNav().setRoot(MainPage)

This will navigate to page but the popover will still appear. Click away to close popover... and then the sideMenu toggle should work as intended.

This is a temp workaround when I am developing so I don't have to refresh my page.

[jgw96]

@lufias Ahh i think i may know what the issue is now. Are you using this.navcontroller.setRoot() from your popover? The actual correct way to set the root from an overlay component is this.app.getRootNav().setRoot(). @abartolo That is actually not a workaround but is the correct way to use setRoot from an overlay component like popover now. With beta.11 we changed it to where each overlay component has its own nav stack, which means that to get the NavController of your "root" instead of the NavController of the overlay component you must do this.app.getRootNav(). Hope all this makes sense.

[jgw96]

Also, @Barryrowe your bug seems to be related to the same bug mentioned in this issue. Would you mind adding your findings to that issue? Thanks for using Ionic!

[abartolo]

@jgw96 Thanks! I will have to look at documentation to get more familiar with changes to nav stack.

However I still have the issue when calling
this.app.getRootNav().setRoot(MainPage)

The popover and backdrop carries over to new page. I have to click away from popover to close it. I can't provide images now but hopefully someone can reproduce.

[jgw96]

Hello @abartolo 😃 . You should be calling the dismiss() method on the ViewController inside your popover to dismiss the popover. Example:

  import { ViewController } from "ionic-angular";

  constructor(private viewCtrl: ViewController){}

  closeMethod() {
     this.viewCtrl.dismiss()
  }

[abartolo]

@jgw96 Yup that makes sense lmao. Thanks!

[jgw96]

haha 😄 no problem!

[Barryrowe]

@jgw96 Done, posted to the other issue.

[jgw96]

@Barryrowe Yep i saw. Thanks!

[lufias]

@jgw96 awesome.. it works!! even though I'm not actually setting root in my popover, rather to navigate to some other page.

Leaving some code here for reference

// Within popover class
import {ViewController, App} from 'ionic-angular';
import {OtherPage} from '../otherpage/otherpage'

@Component
export class MyPopover {
    constructor(
        private viewCtrl: ViewController,       
        private app:App){}

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

Edited: Instead of navigate away from root, it's better to navigate away from current active nav so that back will still refer to the correct page

this.app.getActiveNav().push(OtherPage)

[jgw96]

Hello! @lufias Awesome, glad its working for you now! Since it seems like this issue has been fixed i will be closing this issue for now. Thanks everyone!

[vaibsVB]

@jgw96 Have you find any solution to the issue i.e. we were cloned conference-app or created a new project using beta-11. But still, we find lags or unsuccessful attempt when closing of side menu/navigation drawer on iPad or real device.

[jgw96]

Hello @vaibsVB ! That issue is being tracked here https://github.com/driftyco/ionic/issues/6405 .Feel free to add your findings to that issue. Thanks for using Ionic!

[walter133]

I am still experienced the same issue with beta-11. is this issue closed? Can we have detail step on how to remediate this issue in iOS device?

I did try the code by lufias, but i got "No provider for ViewController!" Exception

[jgw96]

Hello @walter133 ! We are tracking this issue on #6405 as part of the beta.12 release . Thanks!

[walter133]

Thank Justin

Justin Willis [email protected] 於 2016年8月29日 下午11:46 寫道：

Hello @walter133 https://github.com/walter133 ! We are tracking this issue on #6405 https://github.com/driftyco/ionic/issues/6405 as part of the beta.12 release . Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic/issues/7600#issuecomment-243163769, or mute the thread https://github.com/notifications/unsubscribe-auth/AS5HwxYXFkPw78MM1SVHm_PSr1LExXSEks5qkv7QgaJpZM4Je6fP.

[AbrahamLopez10]

Will issue #6645 be finally fixed in beta 12??

[AbrahamLopez10]

Why this issue and issue #6405 have been closed when they clearly have not yet been fixed? (just wondering :/)

[nadreal]

Thanks @abartolo / @jgw96 / @lufias, this fix works well for now.

[usamamashkoor]

@jgw96 I am still facing this issue i am using Ionic beta 11.
this.app.getRootNav().setRoot(AppointmentsPage)
this fix is not working for me.I am still facing the issue.