Repository navigation
CanMatch and UrlMatcher is called twice #26081
Copy link
Copy link
Closed
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: routerfreq3: highrouter: config matching/activation/validationstate: confirmedtype: bug/fix
Milestone
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
Current behavior
UrlMatcher function is called twice on navigation
Expected behavior
UrlMatcher should be called once
Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/angular-router-basic-example-wdvkbt?file=app/app.routing.module.ts
As You can see, on each navigation UrlMatcher is called twice. What's even weirder is that group argument is different each time - one has parent and one doesn't.
What is the motivation / use case for changing the behavior?
Originally I wanted to create matcher that would match route only if You are in specific named outlet:
export function parentOutletMatcher(outlet: string): UrlMatcher {
return (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) => {
if (group.parent && group.parent.children[outlet] === group) {
return { consumed: [] };
}
return null;
};
}So I could use one lazy-loaded module to define routes for many named outlets, example:
const ROOT_ROUTES = [
{ path: 'feature', loadChildren: './lazy.module.ts#LazyModule' },
{ path: 'feature', outlet: 'modal', loadChildren: './lazy.module.ts#LazyModule' },
{ path: 'feature', outlet: 'settings', loadChildren: './lazy.module.ts#LazyModule' },
];
// in lazy.module.ts:
const LAZY_ROUTES = [
{ matcher: parentOutletMatcher(PRIMARY_OUTLET), children: [
// ...
]},
{ matcher: parentOutletMatcher('modal'), children: [
// ...
]},
{ matcher: parentOutletMatcher('settings'), children: [
// ...
]},
]But because of router's weird behavior this doesn't work.
Environment
Angular version: 6.1.8
Browser:
- [x] Chrome (desktop) version XX
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: routerfreq3: highrouter: config matching/activation/validationstate: confirmedtype: bug/fix
Activity
sambaptista commentedon Aug 12, 2019
Still happening in angular 8.2
Eseperio commentedon May 14, 2020
Also happens in 9.1.4
uragun91 commentedon Jun 1, 2020
Any update on this?
agalazis commentedon Aug 21, 2020
also not called for named outlets
basherr commentedon Sep 4, 2020
Still getting the same issue on Angular 10.0.3 on Windows 10
19 remaining items
RahulKate commentedon Jan 18, 2023
@atscott
canMatch called twice, check below screen shot with logs, called twice
OR Please let me know how to avoid one of call from canMatch if it is called twice or How to detect "Route Recognizing" and "Applying Redirects" steps?
csvn commentedon Feb 8, 2023
I think I get the same issue described regarding
CanMatch. It seems to happen during/after theNavigationStartandRouteConfigLoadEndevents.In our project we need to make an asynchronous request (checking version of a service) before deciding to show two different views. This cannot be done as cleanly via other methods than
CanMatch; showing view A or B. Unfortunately, this issue means I need need to cache the result to avoid sending multiple identical requests.Would be a very nice quality of life to ensure this method is only called once, if possible.
atscott commentedon Feb 15, 2023
The goal is to have this addressed in V16. This is a difficult change to make because it requires completely rewriting parts of the URL creation and matching logic in the Router internals. The changes required have spanned multiple versions so far and include multiple breaking changes. The approach here has been cautious and slow to avoid breaking applications in hard to debug ways.
UrlTreefrom anyActivatedRouteSnapshot#45877 is the new logic for generating URLs based on anActivatedRouteSnapshotrather than the current URL treefix(router): Route matching should only happen once when navigating
angular-automatic-lock-bot commentedon Apr 29, 2023
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.