Tab Navigation Back Button

Ionic version:

[x] 4.x

I’m submitting a …

[X] bug report [ ] feature request

Current behavior: Back button has no animation when linking to a page with tabs

Expected behavior: Back button should take you back with animation.

Steps to reproduce: Created a page called main Created another page added in tabs and a separate router for the tabs Linked to the tabs page from main page. Clicking back doesn’t work unless you add defaulthref, and when you do, it doesn’t have the backwards animation.

Related code:

tabs-page.html

`<ion-tabs> <ion-tab-bar slot="bottom"> <ion-tab-button tab="analysis"> <ion-icon name="today"></ion-icon> <ion-label>Analysis</ion-label> </ion-tab-button>

<ion-tab-button tab="summary">
  <ion-icon name="today"></ion-icon>
  <ion-label>Summary</ion-label>
</ion-tab-button>

<ion-tab-button tab="webview">
  <ion-icon name="desktop"></ion-icon>
  <ion-label>Web View</ion-label>
</ion-tab-button>

</ion-tab-bar> </ion-tabs>`

Tabs router

`import { NgModule } from ‘@angular/core’; import { RouterModule, Routes } from ‘@angular/router’; import { TabsPage } from ‘./tabs.page’;

const routes: Routes = [ { path: ‘’, component: TabsPage, children: [ { path: ‘analysis’, children: [ { path: ‘’, loadChildren: ‘…/analysis/analysis.module#AnalysisPageModule’ } ] }, { path: ‘summary’, children: [ { path: ‘’, loadChildren: ‘…/single-story/single-story.module#SingleStoryPageModule’ } ] }, { path: ‘webview’, children: [ { path: ‘’, loadChildren: ‘…/webview/webview.module#WebviewPageModule’ } ] }, { path: ‘’, redirectTo: ‘/tabs/summary’, pathMatch: ‘full’ } ] }, { path: ‘’, redirectTo: ‘/tabs/summary’, pathMatch: ‘full’ } ];

@NgModule({ imports: [ RouterModule.forChild(routes) ], exports: [RouterModule] }) export class TabsPageRoutingModule {} `

Main Router

`import { NgModule } from ‘@angular/core’; import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [ { path: ‘’, loadChildren: ‘./today/today.module#TodayPageModule’ }, { path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ }, ]; @NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], exports: [RouterModule] }) export class AppRoutingModule {} `

A sample application via GitHub

StackBlitz (https://stackblitz.com)

Plunker (http://plnkr.co/edit/cpeRJs?p=preview)

–>

insert short code snippets here

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 7 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v11.1.0 (/usr/local/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

[petrot]

@liamdebeasi I think you could close this issue. Ionic 5.1 solves this problem. defaultHref is necessary for the nested tabs, but the animation works.

[liamdebeasi]

Hi there,

Apologies for the delay in response. I took a look at your repo and have been able to reproduce this issue. I will post an update here when the issue has been resolved.

Thanks!