Side Menu issue after upgrading to Beta 11 (Ionic2) #7600

vaibsVB · 2016-08-08T10:37:08Z

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.

The text was updated successfully, but these errors were encountered:

mpaland · 2016-08-08T11:26:14Z

Related to #7586

jgw96 · 2016-08-08T17:23:07Z

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

mpaland · 2016-08-08T19:22:34Z

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

jgw96 · 2016-08-08T19:24:00Z

@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 · 2016-08-08T19:37:03Z

@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 · 2016-08-08T20:07:51Z

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 · 2016-08-08T20:33:04Z

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. 👍

Thanks for the reply.
Regards.

vaibsVB · 2016-08-09T07:33:34Z

@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 · 2016-08-09T11:16:41Z

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

jgw96 · 2016-08-09T15:10:56Z

@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 · 2016-08-09T17:11:00Z

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 · 2016-08-09T17:15:33Z

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

vaibsVB · 2016-08-09T17:19:05Z

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 · 2016-08-09T17:21:26Z

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

lufias · 2016-08-16T07:03:17Z

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 · 2016-08-16T14:20:08Z

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 · 2016-08-16T14:33:15Z

@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 · 2016-08-16T16:30:33Z

Just did a fresh install of the conference app on my Iphone 6s (ios 9.3.4) delay issue is reproduced as follows:

Click menu button in upper left corner (main content slides to the left)
Try click the menu button (now at the upper right) right after sliding has ended.
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 · 2016-08-16T21:06:44Z

@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 · 2016-08-16T21:15:08Z

@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 · 2016-08-16T22:24:33Z

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 · 2016-08-17T14:36:46Z

@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 · 2016-08-17T14:37:58Z

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 · 2016-08-17T15:00:12Z

@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 · 2016-08-17T15:06:34Z

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 · 2016-08-17T15:08:58Z

@jgw96 Yup that makes sense lmao. Thanks!

jgw96 · 2016-08-17T15:10:50Z

haha 😄 no problem!

Barryrowe · 2016-08-17T15:23:48Z

@jgw96 Done, posted to the other issue.

jgw96 · 2016-08-17T15:30:00Z

@Barryrowe Yep i saw. Thanks!

lufias · 2016-08-18T00:36:51Z

@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 · 2016-08-18T19:41:32Z

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 · 2016-08-19T10:32:46Z

@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 · 2016-08-19T14:53:10Z

Hello @vaibsVB ! That issue is being tracked here #6405 .Feel free to add your findings to that issue. Thanks for using Ionic!

walter133 · 2016-08-28T07:20:13Z

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 · 2016-08-29T15:45:26Z

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

walter133 · 2016-08-29T16:07:21Z

Thank Justin

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

Hello @walter133 https://github.com/walter133 ! We are tracking this issue on #6405 #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 #7600 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/AS5HwxYXFkPw78MM1SVHm_PSr1LExXSEks5qkv7QgaJpZM4Je6fP.

AbrahamLopez10 · 2016-09-05T17:42:11Z

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

AbrahamLopez10 · 2016-09-06T18:47:37Z

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

nadreal · 2016-09-07T07:31:16Z

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

usamamashkoor · 2016-10-07T12:27:04Z

@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.

Ionitron added menus labels Aug 8, 2016

jgw96 added needs: reply the issue needs a response from the user and removed menus labels Aug 8, 2016

Ionitron removed the needs: reply the issue needs a response from the user label Aug 8, 2016

jgw96 added the needs: reply the issue needs a response from the user label Aug 8, 2016

Ionitron removed the needs: reply the issue needs a response from the user label Aug 8, 2016

jgw96 added the needs: reply the issue needs a response from the user label Aug 8, 2016

Ionitron removed the needs: reply the issue needs a response from the user label Aug 9, 2016

jgw96 added the needs: reply the issue needs a response from the user label Aug 9, 2016

Ionitron removed the needs: reply the issue needs a response from the user label Aug 9, 2016

jgw96 added the needs: reply the issue needs a response from the user label Aug 9, 2016

jgw96 mentioned this issue Aug 16, 2016

Side Menu Close Delay iOS and Ionic View #6645

Closed

jgw96 closed this as completed Aug 18, 2016

AbrahamLopez10 mentioned this issue Sep 7, 2016

Ionic 2 Beta 6 Side Menu Animation is Slower than in 1.3 #6404

Closed

ionitron-bot bot locked and limited conversation to collaborators Sep 8, 2018

Side Menu issue after upgrading to Beta 11 (Ionic2) #7600

Side Menu issue after upgrading to Beta 11 (Ionic2) #7600

Comments

vaibsVB commented Aug 8, 2016

mpaland commented Aug 8, 2016

jgw96 commented Aug 8, 2016

mpaland commented Aug 8, 2016

jgw96 commented Aug 8, 2016

vaibsVB commented Aug 8, 2016 • edited Loading

jgw96 commented Aug 8, 2016

vaibsVB commented Aug 8, 2016 • edited Loading

vaibsVB commented Aug 9, 2016 • edited Loading

ilyosdev commented Aug 9, 2016 • edited Loading

jgw96 commented Aug 9, 2016

vaibsVB commented Aug 9, 2016

jgw96 commented Aug 9, 2016

vaibsVB commented Aug 9, 2016 • edited Loading

jgw96 commented Aug 9, 2016

lufias commented Aug 16, 2016

jgw96 commented Aug 16, 2016

Barryrowe commented Aug 16, 2016

overgaardmorten commented Aug 16, 2016 • edited Loading

lufias commented Aug 16, 2016

lufias commented Aug 16, 2016

abartolo commented Aug 16, 2016 • edited Loading

jgw96 commented Aug 17, 2016

jgw96 commented Aug 17, 2016

abartolo commented Aug 17, 2016

jgw96 commented Aug 17, 2016 • edited Loading

abartolo commented Aug 17, 2016

jgw96 commented Aug 17, 2016

Barryrowe commented Aug 17, 2016

jgw96 commented Aug 17, 2016

lufias commented Aug 18, 2016 • edited Loading

jgw96 commented Aug 18, 2016

vaibsVB commented Aug 19, 2016 • edited Loading

jgw96 commented Aug 19, 2016 • edited Loading

walter133 commented Aug 28, 2016 • edited Loading

jgw96 commented Aug 29, 2016

walter133 commented Aug 29, 2016

AbrahamLopez10 commented Sep 5, 2016

AbrahamLopez10 commented Sep 6, 2016

nadreal commented Sep 7, 2016 • edited Loading

usamamashkoor commented Oct 7, 2016 • edited Loading

vaibsVB commented Aug 8, 2016 •

edited

Loading

vaibsVB commented Aug 8, 2016 •

edited

Loading

vaibsVB commented Aug 9, 2016 •

edited

Loading

ilyosdev commented Aug 9, 2016 •

edited

Loading

vaibsVB commented Aug 9, 2016 •

edited

Loading

overgaardmorten commented Aug 16, 2016 •

edited

Loading

abartolo commented Aug 16, 2016 •

edited

Loading

jgw96 commented Aug 17, 2016 •

edited

Loading

lufias commented Aug 18, 2016 •

edited

Loading

vaibsVB commented Aug 19, 2016 •

edited

Loading

jgw96 commented Aug 19, 2016 •

edited

Loading

walter133 commented Aug 28, 2016 •

edited

Loading

nadreal commented Sep 7, 2016 •

edited

Loading

usamamashkoor commented Oct 7, 2016 •

edited

Loading