bug: Angular Router fix in 11.2.10 breaks expected behavior for ion-router-outlet?

Bug Report

Ionic version: [x] 5.x

Current behavior: When using Angular >= 11.2.10 there is a change in the routing behavior due to this bug fix: issue: https://github.com/angular/angular/issues/41379 | fix: https://github.com/atscott/angular/commit/4f941133ce6bf551447c56b484a485261ea9bbfe

With this bug fix, I can no longer navigate to routes parallel to ion-tabs routes and then use the ion-back-button to navigate back to my previous place in ion-tabs. It now always lands on the default tab.

Expected behavior: Prior to fix, I was able to navigate from ion-tabs to parallel modules and then navigate back to previous location in ion-tabs. Use case: app with Posts tab and Messages tab - both link to a separate Profile page, and should return to the original tab when “back” is clicked.

Steps to reproduce: – Expected Behavior: – With this repo: https://github.com/joshbowdoin/back-button-test-angular_11.2.9 Navigate from Posts -> @UserHandle (profile page should show) -> click “Back” (should be back on Posts) Navigate from Messages -> click a conversation -> click @UserHandle (profile page should show) -> click “Back” (should be on previous conversation

– Broken Behavior: – With this repo: https://github.com/joshbowdoin/back-button-test-angular_11.2.10 Navigate from Posts -> @UserHandle (profile page should show) -> click “Back” (should be back on Posts) Navigate from Messages -> click a conversation -> click @UserHandle (profile page should show) -> click “Back” (broken: will now be on Posts instead of previous conversation)

Related code: These three lines were added in Angular’s deactivateRouteAndOutlet which destroys my previous context: https://github.com/atscott/angular/blob/4f941133ce6bf551447c56b484a485261ea9bbfe/packages/router/src/operators/activate_routes.ts#L128-L130

      context.attachRef = null;
      context.resolver = null;
      context.route = null;

Ionic info:

Ionic:

   Ionic CLI                     : 6.13.1 (C:\Users\Cody\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.5
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

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

System:

   NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.13
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. I can reproduce this behavior. The problem here is that we attempt to save the route context inside of the tabs router outlet before it gets deactivated: https://github.com/ionic-team/ionic-framework/blob/master/angular/src/directives/navigation/ion-router-outlet.ts#L150

This line just creates a reference to the context object, but does not clone it. We later use that information to determine the correct URL to go back to (I.e. the correct tab): https://github.com/ionic-team/ionic-framework/blob/master/angular/src/directives/navigation/stack-controller.ts#L173-L182

Since we only created a reference to the context object, when Angular Router started clearing the old route information out in v11.2.10, we no longer had access to the route snapshot’s URL to return us to the correct tab.

I created a patch that does a deep copy of the route object to preserve this snapshot URL so that we can retrieve it later.

Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/angular@5.7.0-dev.202104232151.a9018a2

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23238, and a fix will be available in an upcoming release of Ionic Framework. We do not normally give estimates on when fixes will be released, but given the nature of this bug we do plan on making a release this week.