NavController.push() will

[ivarreukers]

Short description of the problem:

When calling NavController.push() method, it looks like it will push the previous page first when you're on a page that has been pushed on the stack. So f.e. if you're on Page 1 and push to Page 2, this will push Page 1 on the stack (it seems like this), with the data neccesary to go to Page 2. When you then select a different item, it will show the data stored from the previous push.

What behavior are you expecting?

Expecting to push to my page without having to click twice.

Steps to reproduce:

1. run - ionic start myApp sidemenu --v2 --ts
2. create 1 more page, Page3
3. In app/page2/page2.ts change itemTapped() to :

itemTapped(event, item) {
    // That's right, we're pushing to ourselves!
    this.navCtrl.push(Page3, {
      item: item
    });
  }

and import Page3.
4. In page3.ts import NavParams and change constructor to:

 item:any;
    constructor(public navCtrl:NavController, navParams:NavParams) {
        this.item = navParams.get("item");
     }

1. In page3.html, print the item.
2. run ionic serve
3. Go to Page2 (menu item), select item 4.
4. You won't go to the next page, just see the ripple effect.
5. Click on item 2.
6. You will be taken to Page3, showing that you came from item 4.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
http://stackoverflow.com/questions/39325829/ionic2-angularjs2-navcontroller-pushes-previous-page

(includes pictures of Network tab, showing what is loaded when)

Which Ionic Version? 1.x or 2.x
Ionic version 2.0.0-beta.37

Plunker that shows an example of your issue

Couldn't get Plunker working with Ionic2.

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.3.0

Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS:
Node Version: v6.3.0

---

Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 npm install -g cordova

---

[ivarreukers]

This issue has been solved.

Turned out 'selector' is bugged

You can't push to a page which has the 'selector' in the @Component . Remove the selector and you can push. 👍

[jgw96]

Hello! Thanks for opening an issue with us! You are correct, Ionic 2 components should not use selectors. I am going to take a look at our docs and see if we can make this a little more "out there". Thanks for using Ionic!

[sosnet]

Just wanted to report what @ivaro18 figured out.. 👍

[64jcl]

Whoa! So you cant use the selector? Isn't that the name also used in the scss for styling a particular pages elements? Does it mean we have to class the content in order to get something similar working for css scope?

Please do remember then that the command "ionic g page MyNewPage" does generate a page with a selector in the @component tag! That also generates an scss with the selector.

[sosnet]

I'm quite sure it's already possible.
I'm doing this:

...
this.navCtrl.push(NewUserDetailsPage, {
      user: user
});
...

...
@Component({
  selector: 'new-user-details',
  templateUrl: 'new-user.details.html'
})
export class NewUserDetailsPage {
...

[64jcl]

Well we have had so many quirky problems with ionic2 lately where the nav suddenly stops responding to some of the clicks (but not all). Our app has combined both menu bar, tabs and standalone pages. Somewhere things got into serious troubles after some use. I have now removed all my selectors and just use .page-xyz as the scss base instead of the selector and just set that as class on the ion-content.

But we still have issues like these in the startup:
"deviceready has not fired after 5 seconds."
"DEVICE READY FIRED AFTER 1917 ms"

"main.js:18 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined"
after the log shows "Ionic Storage driver: cordovaSQLiteDriver"

There seems to be some serious lag, where your code gets the device ready calls before it is actually fully ready and possibly something in storage fails? We have spent days now trying to fix this for the release, but we have not gotten much wiser to why this happens.

We have also discovered a couple of nasty pitfalls. Angular2 doesnt like very much *ngFor if the object is null - and there is no exception/warning or anything in the log - the whole app just stops working correctly after one of those (needs a full restart). The same happens with e.g. <img [src]="imageVar"> if your imageVar is null. It completely breaks the whole main thread or something so that clicks dont work always (but sometimes).

[64jcl]

Updated to scripts 1.0.0 now and moved to ionic RC5, but the problem with deviceready is still there. Tried compiling with --prod for android device and it seems startup is way slower than RC3 which we had been using for quite some time now.

[ivarreukers]

This issue has been fixed in a later release, RC.0 I believe. The bug was in app lib beta.20.

[64jcl]

Ah yes the selector thing did nothing to fix the other problems we had unfortunately. So likely removed a lot of things in our code there for nothing to get rid of the selector.

I am running scripts 1.0.0 and RC5 - but still have this deviceready issue. Perhaps it has something to do with the @ionic/storage plugin? Edit: Just checked, I am running the latest version 1.5.2 of cordova-sqlite-storage so that should be ok I think?

Here is my package.json:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "ionic_tmp_dir": ".tmp1",
  "private": true,
  "scripts": {
    "ionic:build": " ionic-app-scripts build",
    "ionic:serve": "  ionic-app-scripts serve",
    "ionic:serve:dev": "node copy-env-config.js --env dev | node copy-proxy-config.js --env dev | ionic-app-scripts serve",
    "ionic:serve:prod": "node copy-env-config.js --env prod | node copy-proxy-config.js --env prod |ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angular-moment": "^1.0.1",
    "angular2-uuid": "^1.1.0",
    "ionic-angular": "2.0.0-rc.5",
    "ionic-native": "^2.2.16",
    "ionicons": "3.0.0",
    "moment": "^2.17.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "rollup-plugin-replace": "^1.1.1",
    "sw-toolbox": "^3.4.0",
    "typescript": "2.0.6"
  },
  "description": "An Ionic project",
  "cordovaPlugins": [],
  "cordovaPlatforms": []
}

And my ionic info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.5
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed

I have noticed Angular is already at version 2.4.4 now - so perhaps I should move over to that? But I suspect this must be some of the plugins acting up. Atm we dont use the cordovaPlugins array config in package.json but in our config.xml we have the plugins configured:

    <plugin name="cordova-plugin-camera" spec="~2.3.0" />
    <plugin name="cordova-sqlite-storage" spec="~1.5.0" />
    <plugin name="cordova-plugin-inappbrowser" spec="~1.5.0" />
    <plugin name="cordova-plugin-facebook4" spec="~1.7.4">
        <variable name="APP_ID" value="(snipped)" />
        <variable name="APP_NAME" value="(snipped)" />
    </plugin>
    <plugin name="cordova-plugin-statusbar" spec="~2.2.1" />
    <plugin name="cordova-plugin-whitelist" spec="~1.3.1" />
    <plugin name="cordova-plugin-console" spec="~1.0.5" />
    <plugin name="cordova-plugin-device" spec="~1.1.4" />
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />

Can anyone spot something that might be the cause of the "deviceready has not fired after 5 seconds." problems?

[64jcl]

Sorry to keep replying to my post but I noticed something when I created a new blank startup project using the "ionic start" command. It placed the "sw-toolbox" under dependencies and not under "devDependencies" which I have in mine. Anyone know where the correct place is to place them?

I also noticed the ionic start project uses angular 2.2.1 like I did and not the more recent version 2.4.4.

More surprisingly it uses ionic-native 2.2.11 and not 2.2.16 which is the latest.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.