router
router copied to clipboard
RouterState status stays "pending" indefinitely when showing an error component for a route that has lazy-loaded children
Which project does this relate to?
Router
Describe the bug
Given the following scenario:
- The app uses code-based routing
- There is route with a path parameter parsing functionality and a child route defined
- There is an error component defined for the said route
- The child route has its component defined as lazily-loaded (
lazyRouteComponent(...))
If parsing the path parameter causes an error, the RouterState.status stays pending indefinitely even though the app does not intent to show the lazily-loaded component.
Your Example Website or App
https://stackblitz.com/edit/github-x9j3pnhy?file=src%2Fmain.tsx
Steps to Reproduce the Bug or Issue
- Open the Stackblitz link from above
- Modify the preview window URL directly to include pathname
/lang/es/lazyor/lang/es/eager(this is necessary to trigger a validation error in parameter parsing) - Observe the "router status" element at the top of the preview
Expected behavior
As a developer, I was expecting the router status to be "idle" on both cases (/lang/es/lazy and /lang/es/eager). However, in the lazy-loading case, the status stays "pending" indefinitely.
From what I can gather, the app does not initiate downloading the lazily-loaded component in this case.
Screenshots or Videos
Screen cap of the described behavior:
https://github.com/user-attachments/assets/c8058c55-53db-4bc1-8310-aa73bed9afaf
Platform
- OS: I'm assuming this happens on every platform. I've reproduced this with macOS (15.5, M4)
- Browser: Chrome 137.0.7151.104, Firefox 139.0.1
Additional context
No response