Repository navigation
Retrieve all route segments configuration by URL #15750
Description
I'm submitting a ... (check one with "x")
[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
There is no clear way to get the configuration, see http://stackoverflow.com/q/43143621/1990451.
Given a URL, e.g. /path/path2/path3/123;sdf=df and a routes configuration:
{ path: 'path', data: { g: 'h' }, children: [
{ path: 'path2', data: { c: 'd' }, children: [
{ path: 'something', component: TestpageComponent, data: { a: 'b' } },
{ path: 'path3/create', component: TestpageComponent, data: { b: 'c' } },
{ path: 'path3/:id', component: TestpageComponent, data: { b: 'c' } },
] }
] },
It would be useful to find an actual configuration for all the segments in order to e.g. get a result set of all data parameters on all levels (each segment of the url).
It is possible to split the URL to the segments by e.g.
console.log(this.router.parseUrl(url));
or to be more precise
console.log(this.router.parseUrl(url).root.children['primary'].segments);
which will return
[{"path":"path","parameters":{}},{"path":"path2","parameters":{}},{"path":"and","parameters":{}},{"path":"123","parameters":{"sdf":"df"}}]
So, splitting the URL into segments is not a problem. However it does not provide the configuration for each segment. One can get the actual configuration for all the routes with
console.log(this.router.config);
It's possible to go with the parsed segments through the configuration tree and resolve the branch (and it's not that complicated actually), but it can cause troubles e.g. while resolving :id against create segment. So, it would be cool to use the router's way of resolving the configuration.
Expected behavior
I would expect a method on a Router service that returns an array of all the configurations available for a given URL. E.g.
router.configurationByUrl('/path/path2/path3/123;sdf=df')
// returns [
// { path: 'path', data: { g: 'h' }, children: [...] },
// { path: 'path2', data: { c: 'd' }, children: [...] },
// { path: 'path3/:id', component: TestpageComponent, data: { b: 'c' } }
//],
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Imagine I have a 50% of the URLs protected by some guard (e.g. only logged in users could go there) and other 50% is not protected (displayed for everybody). So, on the navigation menu level (outside of the router-outlet) I want to display only the links which are relevant for the current user, so I need to know which routes are protected by the guard. Guards / data / whatever is just a particular case of the problem.
Please tell us about your environment:
- Angular version: 2.0.X / 4.0.X
- Browser: [all]
-
Language: [all]
-
Node (for AoT issues):
node --version= X
Activity
smurfy commentedon Apr 6, 2017
I need something similar, since my old hacky version does not work anymore.
In the past (pre 4.0.0) it was possible to use the
recognizefunction from@angular/router/src/recognizeand then do something like this:
Then you could access the actual route definition and do nice stuff like breadcrumbs and access checks via a custom directive.
So basically. It would be great if there would be a method for the
RouterlikegetRouteSnapshotByUrl(url: string | UrlTree) : RouteSnapshot.The code is basically there, just not cleanly accessible.
Post 4.0.0 an error will be thrown:
Module not found: Error: Can't resolve '@angular/router/src/recognize'smnbbrv commentedon Apr 9, 2017
Hi @smurfy
could you please post a link to your pull request as a StackOverflow answer at http://stackoverflow.com/q/43143621/1990451 ? I would be happy to accept it. The bounty expires tomorrow and I want to give it to somebody who deserves it 👍
striky1 commentedon Mar 9, 2021
Any updates? O:-)
angular-robot commentedon Jun 5, 2021
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.
Find more details about Angular's feature request process in our documentation.
angular-robot commentedon Jun 25, 2021
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.
We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.
You can find more details about the feature request process in our documentation.
crash83k commentedon Nov 12, 2021
I've been looking for something like this for a while. I'm not sure why Angular doesn't want to expose the functionality to get a route from a URL. I think this is over opinionated.
atscott commentedon Jun 15, 2022
There are a couple major issues that prevent this from being entirely possible:
loadChildren). This side effect is unavoidable in order to fully expand the route configuration.router.navigatefor redirects. This is also undesirable.With that, this isn't something we'd build in the
Routerso it's not suitable for the issue tracker. Recognizing that there's still value in community discussion around the topic, I'm converting this to a discussion.