3

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?

Krishna Chaitanya
  • 397
  • 4
  • 14
  • What is the purpose of the nested routes if you have only one router outlet? – DeborahK Nov 22 '17 at 14:46
  • 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 Nov 22 '17 at 14:51
  • @DeborahK The purpose is to use loadChildren to lazy load modules. – Krishna Chaitanya Nov 22 '17 at 15:00
  • At the child level? Then what about the purpose of the grandchildren? – DeborahK Nov 22 '17 at 15:42

1 Answers1

1

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.