bug: Missing navigation animations when navigating from tabs

[danielsogl]

Bug Report

Navigating forward from a tab page to another sub-page will not show the router transition animation if the sub-page is listed inside the tabs.router.module.ts

Ionic version:

[x] 4.6

Current behavior:

In my application I wanna show the tabs all the time also on sub pages. To react this case I have to list my subpages inside the tabs.router.module.ts file.
If I navigate now from Tab1 to Page1, there will be no router transition animation and the back button usage is not that intuitive anymore.

Expected behavior:

It should be possible to navigate from tabs to pages listed as subpages inside the tabs.router.module.ts file with router transition animations and back button support oob.

Steps to reproduce:

1. Create an new tabs project
2. Create a empty page
3. Add the page as a sub page inside the tabs.router.module.ts file
4. Navigate forward to the child page

Related code:

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

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tabDatesRoot',
        children: [
          {
            path: '',
            loadChildren: '../pages/dates/dates.module#DatesPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tabDatesRoot',
        pathMatch: 'full'
      },
      {
        path: 'pages',
        children: [
          { path: 'map', loadChildren: '../pages/map/map.module#MapPageModule' },
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tabDatesRoot',
    pathMatch: 'full'
  }
];

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

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (/Users/danielsogl/.nvm/versions/node/v12.4.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.4.0 (/Users/danielsogl/.nvm/versions/node/v12.4.0/bin/node)
   npm    : 6.10.1
   OS     : macOS Mojave```

[simetin]

Hi ! I have create a repo illustrating the issue. https://github.com/simetin/ionic-tabs-nav. The problem appears in tabs when you try to navigate to a page that is not a child of one of the tabs. Hope it helps !

[simetin]

Ping

[jamt0]

Same error en react