Nested Routes with Root Router Outlet in Angular 4

Question

I'm using nested routes in my Angular 4 application. They are structured as follows:

routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        children: [
           path: 'grandchild',
           component: GrandchildComponent
        ]
      }
    ]
  }
]

I have a single router outlet defined in app.component.html.

When I navigate to the 'parent/child' route, this setup works fine, with the router outlet loading the ChildComponent.

However, when I navigate to the 'parent/child/grandchild' route, the GrandchildComponent doesn't load.

This does seem to work with a secondary router outlet in the child component, but is there any way that I could get the GrandchildComponent to load on the root router outlet, without the need for a secondary one?

What is the purpose of the nested routes if you have only one router outlet? — DeborahK
You would have to define the route at the top level. [{path: 'parent/child/grandchild', component: GrandchildComponent}], but as others have said it is not really a grandchild at this point so it is probably mislabeled. — LLai
@DeborahK The purpose is to use loadChildren to lazy load modules. — Krishna Chaitanya
At the child level? Then what about the purpose of the grandchildren? — DeborahK

Unknown Unknown · Accepted Answer · 2017-11-22T14:27:11

I would say no.

If you want to load the grandchild in the root outlet, then it's not a grandchild, it's a grandparent ! When you have nested routes, you need to have nested outlets.

Nested Routes with Root Router Outlet in Angular 4

1 Answers