CanMatch snapshot queryParams doesn't work

This issue has been tracked since 2022-09-13.

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

No

Description

I want a sync access to router.snapshot.queryParams in CanMatch guard and it doesn't work:

{
          path: 'todos',
          canMatch: [() => {
            // the location is todos?foo=1
            console.log(inject(ActivatedRoute).snapshot.queryParams) // { }
            return true;
          }],
}

If I wrap it with a setTimeout it logs the correct value.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

No response

Anything else?

No response

JoostK wrote this answer on 2022-09-13

It seems illogical to me that ActivatedRoute would represent the route that is still being matched; it has not yet been activated so ActivatedRoute does not reflect the navigation that is being matched. The CanMatch functions are called with segments: UrlSegment[], is that what you're looking for?

ArielGueta wrote this answer on 2022-09-16

I understand what you're saying, but I expect at least to get access to the "current" activated route.

atscott wrote this answer on 2022-09-21

The current activated route is the current activated route. This is as @JoostK has described. Closing as working as intended.

FYI - you can get what you're looking for with inject(Router).getCurrentNavigation().initialUrl.queryParams

https://stackblitz.com/edit/angular-ivy-sgtr4a?file=src%2Fmain.ts,src%2Findex.html

ArielGueta wrote this answer on 2022-09-21

@atscott thanks! Can you please explain why it called twice, please?

atscott wrote this answer on 2022-09-21

@ArielGueta Yes. It's called twice because there are two stages at the beginning of the routing pipeline that need to call it. One which determines the final URL for the navigation (applyRedirects) and one that creates the ActivatedRouteSnapshots for the navigation (recognize). Both of these match the URL to the Route configs. I'm working on combining these two operations, but it's quite a long process that includes several breaking changes and is being done over the course of several major versions.

ArielGueta wrote this answer on 2022-09-23

Thanks!

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-05
Star Count 84152
Watcher Count 3063
Fork Count 22247
Issue Count 1203

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date