How to render a grandchild view into the same router-outlet as the first child?

Question

This is a follow up question to this: Angular 2 how does auxiliary routes work in 2.1.0?

I also tried looking at this but it doesn't really shed any light on the issue: How to render the child route into the router-outlet of the parent`s parent

If I have a parent route /admin which has a <router-outlet name="admin"></router-outlet> which looks like this:

const routes: Routes = [
  {
    path: '',
    component: AdminAreaComponent,
    canActivate: [AuthGuardService]
  },
  {
    path: 'login',
    loadChildren: '../pages/+login/login.module#LoginModule',
    outlet: 'admin'
  },
  {
    path: 'dashboard',
    loadChildren: '../pages/+dashboard/dashboard.module#DashboardModule',
    outlet: 'admin'
  }
];

I would access the dashboard via /admin(admin:dashboard), but now I need to render a child view of dashboard into the same router-outlet as the dashboard, which is admin. That view looks like this:

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent
  },
  {
    path: 'brands',
    loadChildren: '../pages/+brands/brands.module#BrandsModule',
    outlet: 'admin'
  }
];

However, when I try to access this route via /admin(admin:dashboard/brands) I get an error:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'admin'

I'm guessing that I'm doing something wrong in the route config.

How can I fix this?

score 0 · Answer 1 · answered Oct 20 '16 at 07:58

0

Try with:

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
        {
            path: 'brands',
            loadChildren: '../pages/+brands/brands.module#BrandsModule'
        }
    ]
  }  
];

and /admin/(admin:dashboard//brands)

answered Oct 20 '16 at 07:58

Fabrizio De Bortoli

448
5
16

Can you provide a plunkr for this? I was forced to take a different direction but if this works I'll use this instead. – Chrillewoodz Oct 20 '16 at 08:04
I don't know how to use loadChildren with plnkr... here my test git repo where I tryed: https://github.com/fabriziodebortoli/dynamic-routing – Fabrizio De Bortoli Oct 20 '16 at 12:33

score 0 · Answer 2 · answered Oct 20 '16 at 14:08

0

This might sound crazy, but why not make dashboard a child module of admin?

answered Oct 20 '16 at 14:08

Meligy

35,654
11
85
109

It is a child module of admin. – Chrillewoodz Oct 20 '16 at 16:17

How to render a grandchild view into the same router-outlet as the first child?

2 Answers2

Linked