Ionic-framework: [ionicPage] URL does not update when pushing new pages through navController

[alvin-ho]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
In main page, it has its own ion-nav and a child page dashboard will be pushed into it.
When I trying the push another page in main page through the NavController, the URL does not change. But it does changed when using setRoot method. In both case, the page is changed correctly.

Expected behavior:
The URL will be changed accordingly with the nav push method.

Related code:

app.component.ts

@Component({
    template: `<ion-nav #rootNav [root]="rootPage"></ion-nav>`
})
export class MyApp {

    public rootPage = 'LoginPage';
    constructor( ) {
    }
}

Login.ts

@IonicPage({
    segment: 'login'
})

@Component({
 ...
})

export class LoginPage {

    public nav: NavController;

    constructor( navCtrl: NavController ) {
        this.nav = navCtrl;
    }

    gotoMain() {
        this.nav.setRoot( 'MainPage' );
    }

}

main.ts

@IonicPage({
    segment: 'main'
})

@Component({
    selector: 'page-main',
    template: `
      <ion-header>
          <app-header (onMenuClick)="changeView( $event )"></app-header>
      </ion-header>

      <ion-content>
        <ion-nav #content></ion-nav>
      </ion-content>

    `
})

export class MainPage {

    @ViewChild( 'content' ) content;

    public nav: NavController;

    constructor( navCtrl: NavController ) {
        this.nav = navCtrl;
    }

    ngOnInit() {
       this.content.push(  'DashboardPage'  );
    }

    private changeView( pageName ){

        this.nav.push( pageName ); ---> the URL does not change

        this.nav.setRoot( pageName ); ---> the URL has changed correctly

    }

}

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.3.1
Xcode version: Xcode 8.3.2 Build version 8E2002

[jgw96]

Hello, thanks for using Ionic. Could you post a repo we could use to reproduce this issue?

[alvin-ho]

Hi @jgw96, sorry for the late reply. I have already created a repo for this, please have a check.

https://github.com/alvin-ho/demo_for_ionicPage_issue.git

Many thanks!

[amir-shah]

Hello,
Any progress on this issue?

Thanks

[erperejildo]

I'm looking into this as well

[amir-shah]

@erperejildo - I was able to get this working by enabling Deep Links:
https://ionicframework.com/docs/2.0.1/api/navigation/DeepLinker/

[erperejildo]

Perfect thanks, I'll have a look

[bradorego]

Seeing the same thing in a similar condition - I'm pushing something to the rootNav from inside a tabsNav stack. Everything works fine if I push it to the tabs stack, but I want the next state to exist outside of tabs and it's not updating the URL :/

[erperejildo]

I have created a repository with this issue:
https://github.com/erperejildo/url-not-changing
I think I don't forget anything. I also created an issue on Stackoverflow but we can't find what the problem is:
https://stackoverflow.com/questions/46164952/cannot-create-routes-on-ionic-3/46166137?noredirect=1#comment79309983_46166137

[jeansaigne]

Hi guys,
not sure this is the ultimate solution, but i'm using Ionic 3.x for Desktop app and i was facing the exact same issue, i posted my solution using DeepLinks on the stackoverflow post created by @erperejildo

[erperejildo]

@jeansaigne I tried your solution but didn't work for me. Not sure if you saw the comment.
Maybe I'm forgetting something

[jmchaves]

I got the same error, did someone try anything to fix this?

[guidoknoll]

Hello,

i'm also interested in getting this bug fixed.

Thanks for taking your time!

[ImDiegoDM]

I get this to work just changing the push parameter to the name of the page
i was doing this this.navCtrl.push(page); and the url was not updating
i changed to this.navCtrl.push(page.name); and it worked for me

[ValentinKlinghammer]

The solution proposed by @ImDiegoDM works.

If you switch to the name, it might fail silently. In that case, checkout what the actual error is by catching it like so: this.navCtrl.push(page.name).catch(err => console.log(err));.

[krushn]

Set defaultHistory and it's gonna update Url.

@IonicPage({
    name: 'employer',
    segment: 'city/:city_id',
    defaultHistory: ['cities']
})

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/271