bug: angular, no animations when navigating to non-tabs page that shares a tabs page path

Hi !

Bug Report

Ionic version: [x] 5.x

Current behavior: There is no navigation animation when you navigate to a page that is not a child of one of the tabs. Example going from /tabs/home to /tabs/items/itemID

Also You cannot swipe back when there is no animation.

Here is a screen recording of the problem: https://youtu.be/Eq7LfXoZL2A

I have create a repo illustrating the issue. https://github.com/simetin/ionic-tabs-nav.

Expected behavior: I get that I could just do example /tabs/home/items/itemID, however with an app bigger than a couple of pages and that has a lot of links between different type of items (think for example of Instagram), it become infeasible.

Steps to reproduce: Run the provided Github repo

Related code: https://github.com/simetin/ionic-tabs-nav

Ionic info:

Ionic:

   Ionic CLI                     : 6.0.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.0-rc.2
   @angular-devkit/build-angular : 0.900.0-rc.14
   @angular-devkit/schematics    : 9.0.0-rc.14
   @angular/cli                  : 9.0.0-rc.14
   @ionic/angular-toolkit        : 2.1.1

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   NodeJS : v12.14.1 (/usr/local/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina```

Thank you for looking into this issue !

[simetin]

Yeah definitely !

[liamdebeasi]

Thanks for the issue and apologies for the delay. I can reproduce this behavior. The problem is that Ionic Angular stores the prefix for a tabs path and uses this to determine if a view is a tab or not: https://github.com/ionic-team/ionic-framework/blob/main/angular/src/directives/navigation/ion-router-outlet.ts#L54

Ionic Angular assumes that only tabbed pages will use this prefix. The affected page in https://github.com/ionic-team/ionic-framework/issues/20386#issue-560520145 shares the same route prefix as tabbed pages. As a result, the affected page is considered a tab itself. Tab switches do not have animations, so routing to this page causes the animation to get disabled.

As a workaround, ensuring that tab and non-tab pages do not share path prefixes should fix the issue.