15

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?

Jay Marz
  • 1,861
  • 10
  • 34
  • 54

1 Answers1

17

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

Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112
  • can you show how it's done? I'm still newb in angular 5. thanks – Jay Marz Apr 06 '18 at 08:08
  • I used this solution but I also need to replace the page. Not only by showing/adding `james component` but to totally replace `mark component` by `james component`. Do I need to have something like `*ngIf`? – Jay Marz Apr 06 '18 at 08:23
  • if you want totally replace them, maybe you need them to be siblings, not a parent/child ? – Suren Srapyan Apr 06 '18 at 08:24
  • oh. okay I got the idea. the `mark` path will be totally replaced by `james` then. thanks. – Jay Marz Apr 06 '18 at 08:28