🐞 bug report

Affected Package

Is this a regression?

Description

this.router.navigate(['route1'], { state: { resolveFailed: path } });
                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Use case:

A table shows the user a list of items. The user requests to load a given item using the resolver, but the item no longer exists on the list. The API will return an error which requires preventing the user from navigating to the resource's page, but still showing an error message. Setting the state on the navigation extras can be used exactly for this purpose.

🔬 Minimal Reproduction

Reproduced issue on Stackblitz

Steps:

1. click on route1 button, text should say Route 1 State: {"fromPage": "main", "navigationId": ...}
2. click on route2 button, text should say Route 2 State: {"fromPage": "main", "navigationId": ...}
3. click again on route1 button
4. click on route3 button, text should say Route 2, State: { "resolveFailed": "https://api.example.com", "navigationId": ... }
5. click on route1 button
6. click on route2 button, text should say Route 2 State: {"fromPage": "main", "navigationId": ...}
7. click on route 3 button:

Text should say Route 2 State: {"resolveFailed": "https://api.example.com", "navigationId": ...}
Actual text displayed: Route 2 State: {"fromPage": "main", "navigationId": ...}

Explanation:

Route 3 has a resolver which connects to a resource that doesn't exist, that in turn throws an error, caught by catchError rxjs operator. The catchError redirects the user back to route2.

• If the user asked to navigate to the route from route1, then the state will be set successfully, as seen in step 4.
• If the request was made from route2, then the user doesn't effectively change route and the state doesn't get set.

🌍 Your Environment

Angular Version:

8.2.14