Back button does not route to correct page when using shared components

Bug Report

Ionic version:

[x] 4.0.0-rc.0

Current behavior: I use a shared header component across several pages which displays a profile picture, name, and followers. When I click on the profile picture, I am sent to the artist page as expected, but when I click the back button I am routed to the tab root page instead of the previous page.

Expected behavior:

When clicking the back button, you should be routed back to the previous page instead of the tab navigation root page.

Steps to reproduce:

Here’s a short video showing how clicking on the artist header routes to the proper artist page but when clicking back, it routes to the root of each tab navigation stack. Note: I made sure to leave in the URL of the browser at the top so you can see how routes are changing on each click:

https://streamable.com/5ind2

On the Home Tab -> Select Artist -> Select Release -> Click on Artist Header -> Click Back -> routes to Home Page instead of Release Page

Related code:

In order to route to the artist page from the artist header component I use the following code:

release.page.html (where I use my component)

    <div *ngIf="artistHeader">
      <app-artist-header [artist]="artistHeader" [user]="userHeader"></app-artist-header>
    </div>

artist-header.component.html (the html of the header component)

  <ion-avatar (click)="goToArtist(artist.artistUID)">
    <img [src]="artist.artistImageURL">
  </ion-avatar>

artist-header.component.ts

  goToArtist(uid: string) {
    this.navCtrl.navigateForward(`tabs/${this.route.parent.snapshot.routeConfig.path}/${uid})`)
  }

Where navCtrl is the NavController and route is the ActivatedRoute. I figured this was the best way to determine which tab we are on when routing a shared component. Please advise if there is a better way. But regardless, I thought that navigateForward explicitly told the router to move forward and that the back button should go to the most previous route.

When using the shared component, I import the SharedModule in to that page module. My shared.module.ts looks like the following in order to properly declare and export components:

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [ArtistHeaderComponent],
  exports: [ArtistHeaderComponent]
})

It’s also my understanding if I were to put the (click) event on the actual component HTML like <app-artist-header (click)="goToArtist()"> in the release.page.html then it should work properly, however, I cant make the entire component clickable (just the profile picture) because I have a follow button on the right hand side of the component.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.12.0-beta.2
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.2.0-beta.2
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 7 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v10.13.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

Let me know what else you need to help debug! Thanks 😃

[Benjvfr]

I have exactly the same issue with a shared header. When I click the back button it returns to root page instead of showing the previous page. Bug still presents in 4.0.0-rc.1.

[uncvrd]

Hi @paulstelzer here is a very basic repo you can clone: https://github.com/uncvrd/shared-components-ionic.git

I added two pages and a shared component. You can replicate the problem by doing the following:

1. Press button to route to artist page (page transitions to artist page)
2. Press button to route to release page (page transitions to release page)
3. Click the profile picture (this is the shared component) (this will route you forward to an artist page again
4. Click the back button This routes you to the home page

What should happen: 4. Click back button (this routes back to the release page as that was the most recent page I was on)

Basically at step 4 you should have a router stack that looks like this:

**Newest**
---
Artist <- We are here (so when we pop back one we should go to the release page beneath this one)
Release
Artist
Home
---
**Oldest**