Ionic-framework: Beta10 Navigation does not work

[cescoferraro]

To reproduce

cesco@cesco-desktop: ~/code/src/bitbucket.org/cescoferraro/pip
$ ionic info

Your system information:

Cordova CLI: 6.1.1
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
OS: Distributor ID:     LinuxMint Description:  Linux Mint 17.3 Rosa 
Node Version: v5.12.0


cesco@cesco-desktop: ~/code/src/bitbucket.org/cescoferraro
$ ionic start test --ts --v2
....
....
....

cesco@cesco-desktop: ~/code/src/bitbucket.org/cescoferraro/pip
$ ionic generate component hello 
√ Create app/components/hello/hello.html
√ Create app/components/hello/hello.ts

Then add this func to the home component and create the button on html

  go(){
    this.navController.push(Hello)
  }

<button (click)="go()" >sdfdsf</button>

The hello component wont show unless you click it twice clogging up the document with unwanted multiple copies of the hello tag.

[jgw96]

Hello, thanks for opening an issue with us! Would you be able to provide a plunker that demonstrates this issue? Thanks for using Ionic!

[cescoferraro]

@jgw96 is there a beta10 template I could borrow?

[jgw96]

Sure, sorry i should have left this in my previous comment http://plnkr.co/edit/me3Uk0GKWVRhZWU0usad?p=preview . Thanks!

[cescoferraro]

It seems to be working already on the plunker you provided. Maybe is related to de cli IDK.
I have pushed a Github repo with the bug. I would appreciate if you could check this out. I am seeing the same issue when upgrading my real app from beta 9. @jgw96

[mihaben]

Hi, I had the same problem with beta10. Check if the hello page has a selector, sometimes if the page that you are trying to push have a selector the nav doesn't work properly, remove the selector fixes my problem.

[cescoferraro]

I can confirm that @mihaben tip solved the issue. Cannot belive I let that splip by. @jgw96 Is this the expected behavior? maybe you guys could consider documenting this. Maybe here

[cescoferraro]

Its worth mentioning that I have come across similar situation where the only thing that worked, was setting the component selector to ion-page

selector: 'ion-page'

[jgw96]

Hello all! This is expected behavior, components that are used as a page should not have a selector. I am going to make an issue on the ionic-site repo to document this to avoid the confusion. Thanks for using Ionic!

[marpstar]

@jgw96 -- When you say "This is expected behavior" are you referring to the fact that adding selector: 'ion-page' to the @Component annotation fixes this issue. I am experiencing the same issue and @cescoferraro's suggestion fixed this for me. I'm using Ionic nightly (as of noon on 7/6) on Angular RC 4 with @angular/forms 0.2.0 and this is the only way I can get it to correctly push one of my pages to the stack.

[jgw96]

Sorry, I should have been more clear (: Components that are used as pages in an Ionic 2 app should not have a selector of any kind. Does the page your having trouble pushing have a selector on it? Also, I always check to make sure that I do not have a syntax error in my templates. If there is a syntax error in the template it will not compile and therefore the page will not be pushed onto the stack. Thanks, hope this explains things better!

[marpstar]

@jgw96 You're right. It seems that I had an error in my template. Is there any way to make these errors more apparent?

[jgw96]

Hmm, usually there is an error. What browser are you developing in?

[marpstar]

In both Safari and Chrome on macOS, I'm not seeing any template errors come through.

[jgw96]

Would you mind opening a separate regarding this? I want to look into it more