bug(router) aux-routes not working with empty-path top-level routes

@vsavkin

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 ]

4.2.3 with the same bug

Are there any plans to fix this bug ??

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 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.

Any update about this issue?

Yep. It would be great to have this fixed. But it is good to know now that it is a bug, so I can stop losing my mind. 😃

Increased the priority from medium to critical so this will get looked at sooner.

The only workaround currently is to not use empty path for lazy loaded modules
with this, it ill work as expected and you can toggle any outlet you want
See answer with demo in my q and a

https://stackoverflow.com/questions/47857150/angular-how-can-i-activate-aux-route-with-lazy-loaded-module

choeller opened this issue on 12 Aug 2016
ngbot bot added this to the Backlog milestone 19 days ago

No comment!

@andreyan-andreev

@andreyan-andreev The robot was just introduced recently, there's no ngbot before.

With the new Ivy renderer being being developed for v6, will this be fixed in v6?

Angular v6.1.9 and this is still the issue :/
reproduced here

I've been tracking this issue everyday for 8 month. The prefix of parent route works but feels so weird.

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

@miginmrs

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?

fix(router): process empty path segment when preceding a named outlet

fix(router): process empty path segment when preceding a named outlet (…

@IgorMinar

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?

@IgorMinar

@IgorMinar Still an issue in Angular 7.2.0 can you please reopen this? @miginmrs fixed this issue.

@jasonaden

@jasonaden Are you able to reopen this? The issue still persists.

Seams that there are 5 duplicates around this. I don't get why this is not fixed since years. Fighting since hours with this problem. 😞

The issue still persists[2].

Still having this issue in Angular 8.

The problem may be that supporting this feature would break the following use case.

[{
  path: '',
  children: [{
    path: 'child'
  }]
}, {
  path: '',
  outlet: 'named',
  children: [ ... ]
}]

While processing URL segments against the route configurations, the router preemptively adds empty path segments for outlets that are not already part of the URL tree presumably because they should be run. When navigating to /child, an empty path segment for the "named" outlet would be added and subsequently processed against the empty path routes at the same level. Normally, the segment would match the empty path with the equivalent outlet. Instead, it would match the empty path for the primary outlet because segments would have to match empty paths of any outlet in order to support the use case identified in this issue. The child segment would also match the empty path for the primary outlet, so the outlet uniqueness check would fail with the following error (packages/router/src/recognize.ts line 213).

Two segments cannot have the same outlet name: '' and ''.

In other words, two routes cannot occupy the same outlet.

master...TrevorKarjanis:secondary-route-support

is possible by passing the ralativeTo: this.activatedRoute or this.activatedRoute.parent

For example:

this.router.navigate([{ outlets: { nameOutlet: ['urlOutlet'] } }], {
relativeTo: this.activatedRoute.parent
});

Angular version: 2.0.0-rc.5
Now Angular 9 is coming 🙂

Apparently 2 years is not soon enough :)

Same issue with 9.0.0-next.7. Workaround by having a path instead empty-path works, but not really applicable/convenient with app that is in production.

Anti-modular but actually ugly old school workaround for me (in production app) is: load popup (component in entryComponent) then render specific page in iframe, I know...

Ps: to display specific content i play with
window.self !== window.top

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.}

Reopening because the fix was reverted:

Seems like the changes to fix this in #26243 ended up being reverted in #27516.

Reproduction in latest Angular: https://stackblitz.com/edit/angular-ivy-7nkhpm?file=src%2Fapp%2Fmain.module.ts

Similar issue with potentially simpler reproduction: #12086

Still?

This fixed the issue I was having:

https://stackoverflow.com/a/48831904/2909562

fix(router): support lazy loading for empty path named outlets (#38379)

Sooner than covid-19 vaccine, I can't believe it!

⭐⭐⭐⭐⭐
👏👏👏👏👏

Feels like xmas :)

Finally, gonna try it tomorrow 2021 is already a promising year 🥳🤣

fix(router): apply redirects should match named outlets with empty pa…

This is was included in the 11.0.6 release today so if you're able to update your applications, please do and give it a go.

@atscott

Works great. Thank you @atscott !

I am not sure, but maybe another bug was introduced with this MR. Or at least not fixed. It seems that router.isActive does 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.

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.}

Navigation Menu

Repository navigation

bug(router) aux-routes not working with empty-path top-level routes #10726

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

bug(router) aux-routes not working with empty-path top-level routes #10726

Description

Activity

marius-oprea commented on Jun 19, 2017

KshitizGIT commented on Jun 22, 2017

reppners commented on Aug 3, 2017

smoke commented on Nov 22, 2017

lares83 commented on Nov 30, 2017

maburdi94 commented on Dec 7, 2017

jasonaden commented on Dec 7, 2017

mid787 commented on Jan 3, 2018

andreyan-andreev commented on Feb 11, 2018

trotyl commented on Feb 13, 2018

nicky-lenaers commented on Apr 1, 2018

luckylooke commented on Oct 23, 2018

upondeep commented on Oct 26, 2018

sliekens commented on Nov 7, 2018

TGC79 commented on Nov 23, 2018

TGC79 commented on Dec 10, 2018

bramleffers commented on Jan 14, 2019

TGC79 commented on Jan 25, 2019

DaSchTour commented on Apr 7, 2019

vzkhrv commented on Apr 11, 2019

lincolnthree commented on Jun 6, 2019

TrevorKarjanis commented on Jun 26, 2019

magnolemos commented on Jul 26, 2019

wynfred commented on Sep 12, 2019

jcimoch commented on Sep 12, 2019

elvisbegovic commented on Sep 24, 2019

angular-automatic-lock-bot commented on Oct 26, 2019

atscott commented on Jan 28, 2020

atscott commented on May 21, 2020

PaulBaugher commented on Jun 20, 2020

DoloMike commented on Aug 21, 2020

jcimoch commented on Jan 5, 2021

Bulforce commented on Jan 5, 2021

henriacle commented on Jan 5, 2021

atscott commented on Jan 6, 2021

acohenOT commented on Jan 8, 2021

LukasMachetanz commented on Jan 19, 2021

angular-automatic-lock-bot commented on Feb 19, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions