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
– DeborahK, Commented Nov 22, 2017 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
– LLai, Commented Nov 22, 2017 at 14:51
@DeborahK The purpose is to use loadChildren to lazy load modules. — Krishna Chaitanya
– Krishna Chaitanya, Commented Nov 22, 2017 at 15:00
At the child level? Then what about the purpose of the grandchildren? — DeborahK
– DeborahK, Commented Nov 22, 2017 at 15:42

user4676340 · Accepted Answer · 2017-11-22 14:27:11Z

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.

answered Nov 22, 2017 at 14:27

user4676340

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested Routes with Root Router Outlet in Angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related