question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

UrlMatcher is called twice

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:10
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
Eseperiocommented, May 14, 2020

Also happens in 9.1.4

4reactions
sambaptistacommented, Aug 12, 2019

Still happening in angular 8.2

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found