BrowserUrl not working with popstate events #67549
Description
Which @angular/* package(s) are the source of the bug?
router
Is this a regression?
No
Description
The browserUrl property in the router navigation extras allows to display a different URL in the address bar than the one used for route matching. The problem is that when using the popstate triggers (back and forward buttons), the router is using the URL in the address bar and not the router's internal state, causing the route matching to fail to match with the same previously matched route.
Expected result
When using a custom browserUrl, the route matching strategy should match against the router internal state rather than the given browserUrl value (URL in the address bar).
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-rmvgyk2x
Please provide the exception or error you saw
ERROR RuntimeError: NG04002: Cannot match any routes. URL Segment: 'missing-item'
at Recognizer.noMatchError (_router-chunk.mjs:2813:12)
at Recognizer.match (_router-chunk.mjs:2847:20)
at async Recognizer.recognize (_router-chunk.mjs:2820:9)
at async _router-chunk.mjs:3076:9
console.error @ .webcontainer@runtime.056788dd.js:26
handleError @ _effect-chunk2.mjs:2601
(anonymous) @ _effect-chunk2.mjs:2617
runOutsideAngular @ _effect-chunk2.mjs:2576
(anonymous) @ _effect-chunk2.mjs:2610
(anonymous) @ _router-chunk.mjs:4259
Promise.catch
navigateToSyncWithBrowser @ _router-chunk.mjs:4255
(anonymous) @ _router-chunk.mjs:4239
(anonymous) @ _router-chunk.mjs:4013
setTimeout
(anonymous) @ _router-chunk.mjs:4012
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonymous) @ Subject.js:34
errorContext @ errorContext.js:19
next @ Subject.js:27
(anonymous) @ _location-chunk.mjs:196
Please provide the environment you discovered this bug in (run ng version)
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI : 21.2.1
Angular : 21.2.2
Node.js : 20.19.1
Package Manager : npm 10.8.2
Operating System : linux x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.2.1 │ ^v21.1.0 │
│ @angular/cli │ 21.2.1 │ ^v21.1.0 │
│ @angular/common │ 21.2.2 │ ^v21.1.0 │
│ @angular/compiler │ 21.2.2 │ ^v21.1.0 │
│ @angular/compiler-cli │ 21.2.2 │ ^v21.1.0 │
│ @angular/core │ 21.2.2 │ ^v21.1.0 │
│ @angular/forms │ 21.2.2 │ ^v21.1.0 │
│ @angular/platform-browser │ 21.2.2 │ ^v21.1.0 │
│ @angular/router │ 21.2.2 │ ^v21.1.0 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 5.9.3 │ ^5.9.3 │
└───────────────────────────┴───────────────────┴───────────────────┘
Anything else?
Currently, the router is using the history state to store some information, such as a navigation id. In theory, that id could be used to find the previously used navigation in order to "restore" it, but the id alone won't work in cases where the user performs a browser refresh. This being said, in order to fix this problem, additional navigation data may need to be added to the state history, such as the internal route URL.
I'm willing to work on this if I'm given some guidance on the intended behavior.