UrlMatcher is called twice
See original GitHub issueI’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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:10
- Comments:10 (1 by maintainers)
Top Results From Across the Web
UrlMatcher - Angular
A function for matching a route against URLs. Implement a custom URL matcher for Route.matcher when a combination of path and pathMatch is...
Read more >Angular 6+ Dependency Injection & Async in UrlMatcher
At the time of writing, CanMatch guards get called multiple times per navigation, like UrlMatcher (UrlMatcher is called twice (#26081)).
Read more >Design of a Router/UrlMatcher
A fixed prefix, of known length; A fixed suffix, of known length; A minimum length, which is at least as long as the...
Read more >The Three Pillars of the Angular Router - InDepth.Dev
Internally, the router uses a function called applyRedirects to process redirects: ... Note that a routerState can have multiple trees of ActivatedRoutes at ......
Read more >Url.staterule - UI-Router
urlMatcher: UrlMatcher. Inherited from MatcherUrlRule. ... If multiple rules matched, each rule's matchPriority is called with the value from match.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Also happens in 9.1.4
Still happening in angular 8.2