Children of componentless routes with named outlets are placed into the incorrect router-outlet #11082

Closed
UnwrittenFun opened this Issue Aug 25, 2016 · 4 comments

Comments

Projects
None yet
5 participants
@UnwrittenFun

UnwrittenFun commented Aug 25, 2016

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Current behavior
When a route with a specified outlet has children, the activated child is put into the main router outlet, along side the route component that is already active inside this outlet, rather than in the named outlet.

Expected/desired behavior
Routes whose (componentless) parents have a specified outlet, should go into said outlet.

Reproduction of the problem

The relevant route:

  {
    path: 'session',
    outlet: 'dialog',
    children: [
      {
        path: 'login',
        component: LoginComponent,
      },
      {
        path: 'register',
        component: RegisterComponent,
      }
    ]
  }

Plunkr reproducing the issue:
http://plnkr.co/edit/W4t6c2hFWW3x9Sf2pn8S?p=preview
Click the three different links and you can see the login and register routes are put into the main outlet alongside the already activated home route, whereas the confirmation route is correctly placed in the named outlet.

What is the motivation / use case for changing the behavior?
I believe this to be a bug and the use case is demonstrated in the plunkr

Please tell us about your environment:

  • Angular version: 2.0.0-rc.5
  • Browser: all
  • Language: TypeScript 2.0.0
@mrkosima

This comment has been minimized.

Show comment
Hide comment
@mrkosima

mrkosima Aug 29, 2016

I met this case too.
Looks like missed error - component is undefined
Adding component to {path: 'session', outlet: 'dialog'... Route will resolve the issue

I met this case too.
Looks like missed error - component is undefined
Adding component to {path: 'session', outlet: 'dialog'... Route will resolve the issue

@UnwrittenFun

This comment has been minimized.

Show comment
Hide comment
@UnwrittenFun

UnwrittenFun Aug 29, 2016

The session route is a componentless route

The routes could be expressed like so, fixing the problem

  {
    path: 'session/login',
    component: LoginComponent,
    outlet: 'dialog',
  },
  {
    path: 'session/register',
    component: RegisterComponent,
    outlet: 'dialog',
  },

But that leads to a lot of duplication, particularly when using the resolve/data properties, which componentless routes are supposed to solve

The session route is a componentless route

The routes could be expressed like so, fixing the problem

  {
    path: 'session/login',
    component: LoginComponent,
    outlet: 'dialog',
  },
  {
    path: 'session/register',
    component: RegisterComponent,
    outlet: 'dialog',
  },

But that leads to a lot of duplication, particularly when using the resolve/data properties, which componentless routes are supposed to solve

@vicb vicb added the comp: router label Aug 30, 2016

vsavkin added a commit to vsavkin/angular that referenced this issue Oct 20, 2016

vsavkin added a commit to vsavkin/angular that referenced this issue Oct 26, 2016

@vsavkin

This comment has been minimized.

Show comment
Hide comment
@KevinSeroux

This comment has been minimized.

Show comment
Hide comment
@KevinSeroux

KevinSeroux Jul 13, 2017

The problem with the above solution (merging the componentless route and the component route: session/register), is that routerLinkActive does not work for "session/register".

KevinSeroux commented Jul 13, 2017

The problem with the above solution (merging the componentless route and the component route: session/register), is that routerLinkActive does not work for "session/register".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment