Repository navigation
bug(router) aux-routes not working with empty-path top-level routes #10726
Description
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 ]
Activity
[-]bug(router) aux-routes not working with componentless top-level routes[/-][+]bug(router) aux-routes not working with empty-path top-level routes[/+]choeller commentedon Aug 25, 2016
@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
sambaek commentedon Nov 30, 2016
Any updates on this? This is blocking us from building out a feature. Would love to see this fixed or a proposed workaround
jeanpaulattard commentedon Jan 31, 2017
I have also encountered this issue, and is blocking me from performing certain actions... @vsavkin what are the plans concerning this issue? Are there any plans of tackling it in the near or distant future?
Thanks in advance!
mikechamberlain commentedon Feb 26, 2017
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
uberspeck commentedon Feb 26, 2017
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!
dietergeerts commentedon Mar 17, 2017
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!
asadsahi commentedon Mar 31, 2017
@IgorMinar @pkozlowski-opensource appologies to attract your attention to this issue. Any ETA on this one?
jcimoch commentedon May 26, 2017
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 :(
57 remaining items
jcimoch commentedon Jan 5, 2021
Sooner than covid-19 vaccine, I can't believe it!
Bulforce commentedon Jan 5, 2021
⭐⭐⭐⭐⭐
👏👏👏👏👏
Feels like xmas :)
henriacle commentedon Jan 5, 2021
Finally, gonna try it tomorrow 2021 is already a promising year 🥳🤣
fix(router): apply redirects should match named outlets with empty pa…
atscott commentedon Jan 6, 2021
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.acohenOT commentedon Jan 8, 2021
Works great. Thank you @atscott !
LukasMachetanz commentedon Jan 19, 2021
I am not sure, but maybe another bug was introduced with this MR. Or at least not fixed. It seems that
router.isActivedoes not provide the correct result for auxiliary routes with empty-path top level routes.I tried it here: https://stackblitz.com/edit/lukmac-angular-router
I think the example should be self explanatory. I would expect the console output to show true and not false.
Can maybe someone confirm the issue and tell if it is somehow corresponding to this. Thanks.
angular-automatic-lock-bot commentedon Feb 19, 2021
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.