angular: bug(router) aux-routes not working with empty-path top-level routes
I’m submitting a … (check one with “x”)
[x] bug report
[ ] 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
Aux-Routes are not found when using two levels of “default routes” (with path:'').
This config works:
RouterModule.forRoot([
{
path: 'tasks', component: TasksComponent, //container-component has two outlets!
children: [
{ path: '', component:TaskListComponent },
{ path: 'overview/:id', component: TasksComponent, outlet: 'right' },
]
}
],
I can open the Tasks-overview by doing:
http://localhost:4200/tasks/(right:overview/3)
See this plnkr and click “to list”, “open aux”
As I want to extract the whole Tasks-Functionality into a TasksModule I need to be able to do something like this:
RouterModule.forRoot([
{
path: 'tasks', : children: [ // this one would be in main module
//this is defined in the TasksModule:
{ path: '', component: TasksComponent, //container-component has two outlets!
children: [
{ path: '', component:TaskListComponent },
{ path: 'overview/:id', component: TasksComponent, outlet: 'right' },
]
}
],
I would assume both configs are equivalent, and all of the “normal” routing works perfectly fine. But now the link above http://localhost:4200/tasks/(right:overview/3) leads to:
Uncaught (in promise): Error: Cannot match any routes: 'tasks'
See this plnkr: http://plnkr.co/edit/xd77Mkpqfq6U9tKM4USU?p=preview
Expected/desired behavior
Aux-Routes should also work with empty-path parents
Reproduction of the problem
Working version: http://plnkr.co/edit/Twx4hXQ0TLfHfrYSe4MO?p=preview Non-working version: http://plnkr.co/edit/xd77Mkpqfq6U9tKM4USU?p=preview
What is the expected behavior?
Both versions of route definition should lead to the same behavior
What is the motivation / use case for changing the behavior?
With the current implementation it is impossible to create an encapsulated Config / Module for the tasks behaviour and include it under a certain path into the main config e.g. “myTasks”.
/cc @vsavkin
Please tell us about your environment:
- Angular version: 2.0.0-rc.5
- Browser: [all ]
- Language: [TS ]
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 89
- Comments: 46 (12 by maintainers)
Commits related to this issue
- fix(router): process empty path segment when preceding a named outlet PR Close #10726 — committed to miginmrs/angular by miginmrs 6 years ago
- fix(router): process empty path segment when preceding a named outlet PR Close #10726 — committed to miginmrs/angular by miginmrs 6 years ago
- fix(router): process empty path segment when preceding a named outlet (#26243) PR Close #10726 PR Close #26243 — committed to angular/angular by miginmrs 6 years ago
- fix(router): process empty path segment when preceding a named outlet (#26243) PR Close #10726 PR Close #26243 — committed to FrederikSchlemmer/angular by miginmrs 6 years ago
- fix(router): process empty path segment when preceding a named outlet (#26243) PR Close #10726 PR Close #26243 — committed to ngfelixl/angular by miginmrs 6 years ago
- fix(router): support lazy loading for empty path named outlets (#38379) In general, the router only matches and loads a single Route config tree. However, named outlets with empty paths are a special... — committed to angular/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of how things... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents (#40029) There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of h... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents (#40029) There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of h... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents (#40029) There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete view of h... — committed to atscott/angular by atscott 4 years ago
- fix(router): apply redirects should match named outlets with empty path parents (#40029) (#40315) There are two parts to this commit: 1. Revert the changes from #38379. This change had an incomplete ... — committed to angular/angular by atscott 4 years ago
Increased the priority from
mediumtocriticalso this will get looked at sooner.@vsavkin are there plans to fix this? I think the current behaviour makes it impossible to use aux-routes in combination with lazy-loading / feature-module scenarios
@IgorMinar @pkozlowski-opensource appologies to attract your attention to this issue. Any ETA on this one?
This is still an issue in 5.0.0, 5.0.1, 5.0.2 😦
I think the following are related or same issues:
With advancement of more and more complicated Angular apps this is becoming more and more common bug people hit, so anyone please fix it.
Are there any plans to fix this bug ??
This needs to be fixed ASAP!!! Some resolves are common for the main component and the auxiliary one, so they HAVE to be declared one level higher, without a path!
Seems like the changes to fix this in #26243 ended up being reverted in #27516.
@IgorMinar can you reopen this so we can continue to have visibility / history of the issue?
I spent hours figuring out why it is not working and then I found this bug. It is still not working on angular 4.0.3 😦
Any update about this issue?
@jasonaden Are you able to reopen this? The issue still persists.
@IgorMinar Still an issue in Angular 7.2.0 can you please reopen this? @miginmrs fixed this issue.
4.2.3 with the same bug
Still having this issue in Angular 8.
⭐⭐⭐⭐⭐ 👏👏👏👏👏
Feels like xmas 😃
I’ve been tracking this issue everyday for 8 month. The prefix of parent route works but feels so weird.
This renders combination of lazy loading / modular route config and secondary routes unusable 😦 of course all empty paths can be filled up with nonsense but thats contrary to readable url’s and the concept of empty paths.
This is was included in the
11.0.6release today so if you’re able to update your applications, please do and give it a go.Sooner than covid-19 vaccine, I can’t believe it!
Angular version: 2.0.0-rc.5Now Angular 9 is coming 🙂It doesn’t help that the plunkr is broken. 😕
/edit 2 Updated repro: https://stackblitz.com/edit/angular-issue-10726
/edit 3 Actually luckylooke posted a better repro with better examples
Angular v6.1.9 and this is still the issue 😕 reproduced here
Yeah this one is really frustrating! I’ve just spent the last day trying to figure out why my child auxiliary route doesn’t work as expected, and have finally tracked it down to this bug. Would be great to have some kind of ETA on this.
In case anyone is interested, here is a Plunkr with the workaround implemented, demonstrating how to load child aux routes both from a routerLink and programatically.
http://plnkr.co/edit/N1BxbCn3ZR8yd0lnHZBU?p=preview
Still?
It’s still a problem in 7.0.
The fact that using lazy loaded sub modules to fragment your codebase into smaller bundles has been pushed as the correct way to build apps for some time now, more attention should be paid to fixing this issue.
Can we please get some love to @miginmrs PR #26243… and get this fixed finally?
With the new Ivy renderer being being developed for v6, will this be fixed in v6?
I’d love to see this fixed soon as well! Burned through a day and a half of beating my head against the wall before giving up and falling back to Bootstrap modals. I do love this router though!