0

I have this route:

{
   path: 'dashboard',
   loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'
}

With the dashboard's router looking like this:

@NgModule({
  imports: [
    ComponentsModule,
    SharedModule,
    RouterModule.forChild([
      {
        path: '',
        component: DashboardComponent
      }
    ])
  ],
  declarations: [
    DashboardComponent
  ]
})
export class DashboardRouterModule {}

And in my parent view (which is /admin, dashboard route is /admin/dashboard), I have a <router-outlet name="admin"></router-outlet>, but I can't seem to figure out the syntax for this because I just get a bunch of errors whenever I try.

Here's what I tried:

{
   path: 'dashboard(admin: '')',
   loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'
}

{
   path: 'dashboard(admin: dashboard)',
   loadChildren: '../pages/dashboard/dashboard.module#DashboardModule'
}

(router):

 {
   path: '(dashboard: '')',
   component: DashboardComponent
 }

 {
   path: '',
   component: DashboardComponent,
   outlet: 'admin'
 }

What is the correct way?

Chrillewoodz
  • 27,055
  • 21
  • 92
  • 175

1 Answers1

1

In the parent router:

{
   path: 'dashboard',
   loadChildren: '../pages/dashboard/dashboard.module#DashboardModule',
   outlet: 'admin'
}

and go with /(admin:dashboard)

Fabrizio De Bortoli
  • 448
  • 5
  • 16
  • Seems to work, can the url be prettified in some way so that it doesn't actually say `localhost:4200/admin/(admin: dashboard)`? I want the url to be `localhost:4200/admin/dashboard`. – Chrillewoodz Oct 19 '16 at 08:19
  • And how do you write child routes of dashboard into the same `router-outlet`? Like `http://localhost:4200/admin/(admin:dashboard/brands)` – Chrillewoodz Oct 19 '16 at 08:25
  • I think you can't prettify the url, that's the correct syntax for auxiliary route. An idea could be to have a `admin/dashboard` and use the ngOnInit method in DashboardComponent to open an internal named outlet – Fabrizio De Bortoli Oct 19 '16 at 08:27
  • About child routes of dashboard... `/(admin:dashboard/brands)` seems to be correct – Fabrizio De Bortoli Oct 19 '16 at 08:33
  • That doesn't work unfortunately, `http://localhost:4200/admin/(admin:dashboard/brands)` and `http://localhost:4200/(admin:dashboard/brands)` both fail.. – Chrillewoodz Oct 19 '16 at 08:35
  • Nevermind, turns out you can't have the `outlet` set on the deep children, only the parent is enough. – Chrillewoodz Oct 19 '16 at 08:36
  • Do you have a `` in your DashboardComponent template? – Fabrizio De Bortoli Oct 19 '16 at 08:39
  • No, the child views should use the same outlet as the dashboard. But it's working now. – Chrillewoodz Oct 19 '16 at 08:40
  • Turns out it wasn't working, I just got fooled by my layout. How can I make the brands view load into the same `router-outlet` as the dashboard? – Chrillewoodz Oct 19 '16 at 12:00
  • http://stackoverflow.com/questions/40131110/how-to-render-a-grandchild-view-into-the-same-router-outlet-as-the-first-child – Chrillewoodz Oct 19 '16 at 12:15