Tapping a tab multiple times forces incorrect stack navigation

[uncvrd]

Bug Report

Ionic version:

[x] 4.0.0-rc.0

Current behavior:

When using Ionic tabs and tapping on a page element, and I am routed to the correct page with a back button. To reset or go back to the home page, I can tap the tab icon at the bottom of the screen. This works as expected, however, If I tap the tab bar icon twice (or more) it seems to mess up the router navigation, so when I click on an element to go to another screen, the back button does not present itself and (on iOS) the animation slides in from the left hand side of the screen.

Expected behavior:
Similar to Instagram, I expect clicking the icon in the tab bar to reset me back to root and regardless of how many times you click the icon in the tab bar, the app should route correctly forward with a backbutton at the top left corner.

Steps to reproduce:
Here's a video displaying the issue:

https://streamable.com/k059x

0:00 -> 0:03
the correct procedure
0:04 -> End
you can see my cursor go to the icon and click twice, this triggers a stack navigation problem where the next time I click on the element, the page doesn't navigate properly (no back button and animation slides in from left iOS).

Related code:

I am using the new tabs lazy loaded navigation that was added in 4.0.0-beta18. Lots of moving parts here so just let me know if you need specific code snippets!

Here's my Lazy Loaded Tab Routes (removed other tabs for brevity)

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: '../home/home.module#HomePageModule'
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full',
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

Here are my Home routes

const routes: Routes = [
      {
        path: '',
        component: HomePage
      },
      {
        path: ':artist/:release',
        component: ReleasePage
      },
      {
        path: ':artist',
        component: ArtistPage
      }
]

The artist page navigation is triggered by:

this.router.navigateByUrl('tabs/home/${this.artist.artistUID}')

Thus when navigating the ArtistPage component is loaded and transitioned to!

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

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