Prerequisites
Ionic Framework Version
v8.x
Current Behavior
When using NavController.navigateRoot and an Angular Route Guard returns a UrlTree, the existing pages in the navigation stack remain.
Expected Behavior
When using NavController.navigateRoot and an Angular Route Guard returns a UrlTree, the existing pages in the navigation stack are removed.
Steps to Reproduce
- Install @ionic/angular and @ionic/core >= 8.7.18
- Setup an Angular route with a Route Guard that returns a UrlTree
- Use NavController.navigateRoot to navigate to that route
- Check the navigation stack, for example with IonRouterOutlet.canGoBack
Code Reproduction URL
ca03a6d
Ionic Info
Ionic:
Ionic CLI : 6.20.1
Ionic Framework : not installed
@angular-devkit/build-angular : 21.2.2
@angular-devkit/schematics : 21.2.2
@angular/cli : 21.2.2
@ionic/angular-toolkit : not installed
Capacitor:
Capacitor CLI : 8.1.0
@capacitor/android : 8.1.0
@capacitor/core : 8.1.0
@capacitor/ios : 8.1.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v22.22.0
npm : 10.9.4
OS : macOS
Additional Information
The issue was introduced in Ionic 8.7.18 with #30955. Because of that PR, a NavigationCancel leads to the NavController direction being lost. This is not necessarily bad, but it interacts poorly with Angular Route Guard redirects. When such a Route Guard returns a UrlTree, the initial navigation gets cancelled and a new navigation to that UrlTree gets started. Unfortunately, that new navigation loses the information about the NavController direction because of the intermittent NavigationCancel.
Preferred solution:
Detect whether the NavigationCancel was caused by a Route Guard redirecting somewhere else and in those cases retain the NavController direction.
Alternative solution:
If our preferred solution is not feasible, please provide guidance on how to achieve the intended outcome. In our case: Start a navigation such that if the Route Guards lead to a successful navigation, the rest of the navigation stack is removed.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
When using NavController.navigateRoot and an Angular Route Guard returns a UrlTree, the existing pages in the navigation stack remain.
Expected Behavior
When using NavController.navigateRoot and an Angular Route Guard returns a UrlTree, the existing pages in the navigation stack are removed.
Steps to Reproduce
Code Reproduction URL
ca03a6d
Ionic Info
Ionic:
Ionic CLI : 6.20.1
Ionic Framework : not installed
@angular-devkit/build-angular : 21.2.2
@angular-devkit/schematics : 21.2.2
@angular/cli : 21.2.2
@ionic/angular-toolkit : not installed
Capacitor:
Capacitor CLI : 8.1.0
@capacitor/android : 8.1.0
@capacitor/core : 8.1.0
@capacitor/ios : 8.1.0
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
NodeJS : v22.22.0
npm : 10.9.4
OS : macOS
Additional Information
The issue was introduced in Ionic 8.7.18 with #30955. Because of that PR, a NavigationCancel leads to the NavController direction being lost. This is not necessarily bad, but it interacts poorly with Angular Route Guard redirects. When such a Route Guard returns a UrlTree, the initial navigation gets cancelled and a new navigation to that UrlTree gets started. Unfortunately, that new navigation loses the information about the NavController direction because of the intermittent NavigationCancel.
Preferred solution:
Detect whether the NavigationCancel was caused by a Route Guard redirecting somewhere else and in those cases retain the NavController direction.
Alternative solution:
If our preferred solution is not feasible, please provide guidance on how to achieve the intended outcome. In our case: Start a navigation such that if the Route Guards lead to a successful navigation, the rest of the navigation stack is removed.