Skip to content

CanMatch and UrlMatcher is called twice #26081

Closed

Description

@dawidgarus

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

Activity

  1. added this to the needsTriage milestone on Sep 24, 2018
  2. modified the milestones: needsTriage, Backlog on Nov 20, 2018
  3. sambaptista commented on Aug 12, 2019

    @sambaptista

    Still happening in angular 8.2

  4. Eseperio commented on May 14, 2020

    @Eseperio

    Also happens in 9.1.4

  5. uragun91 commented on Jun 1, 2020

    @uragun91

    Any update on this?

  6. agalazis commented on Aug 21, 2020

    @agalazis

    also not called for named outlets

  7. basherr commented on Sep 4, 2020

    @basherr
    Contributor

    Still getting the same issue on Angular 10.0.3 on Windows 10

  8. added
    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
    on Oct 1, 2020
  9. 19 remaining items

  10. RahulKate commented on Jan 18, 2023

    @RahulKate

    @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?

  11. csvn commented on Feb 8, 2023

    @csvn
    Contributor

    I think I get the same issue described regarding CanMatch. It seems to happen during/after the NavigationStart and RouteConfigLoadEnd events.

    image

    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.

  12. atscott commented on Feb 15, 2023

    @atscott
    Contributor

    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.

  13. added a commit that references this issue on Mar 29, 2023
    836e434
  14. angular-automatic-lock-bot commented on Apr 29, 2023

    @angular-automatic-lock-bot

    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.

  15. locked and limited conversation to collaborators on Apr 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions