How to nest more than 2 levels of children routes in Angular 5?

Question

I have this sample routes in angular 5. The 3 components are imported to this module. The component mark is generated under the folder of john component and james component is generated under the folder of mark component.

I want to load james component via path that looks like this: https://my-website/john-route/mark-route/james-route so I created this routes in the module file.

  const routes: Routes = [
  {
    path: 'john-route',
    component: JohnComponent,
    children: [
      {
        path: 'mark-route',
        component: MarkComponent,
        children: [
          {
            path: 'james-route',
            component: JamesComponent
          }
        ]
      }
    ]
  }
];

But my problem is, it only loads up to mark component with this [routerLink]="['mark-route']". And on james component with this [routerLink]="['james-route']", it only shows correct path https://my-website/john-route/mark-route/james-route in the URI but doesn't load the component in the page. What is happening here, how to solve this issue or what is the best solution for this?

Answer 1

Your MarkComponent need also to have a router-outlet inside it.

To work with child routes, your parent component must have a markup part

<router-outlet></router-outlet>

This lets your child routes to be placed in the parent component. The same must be done for all components which have children components.

For more see Routing & Navigation in Angular