Navigate child route Angular

Question

I have app-routing (for root)

  { path: 'login', component: LoginComponent },
  { path: 'swagger', component: SwaggerComponent },
  { path: '**', component: PageNotFoundComponent}

I created other router-outlet (for child)

  { path: '', 
    component: LayoutComponent,
    children: [
      {
        path: 'manufacturers',
        component: ShowManufacturerComponent,       
        children: [
          {
            path: 'add',
            component: AddComponent,
          },
          {
            path: 'edit/:id',
            component: EditComponent,
          },
        ]
      },
      { path: 'products', component: ShowProductComponent },
      { path: 'categories', component: ShowCategoryComponent },
    ] 
  }

and LayoutComponent

<header></header>
<sidebar></sidebar>
<router-outlet></router-outlet>
<footer></footer>

Now this is router tree

AppComp
  --PageNotFoundComp
  --SwaggerComp
  --LoginComp
  --LayoutComp
      --ShowManufacturerComp
          --AddComp
          --EditComp
      --ShowCategoriesComp
....

When I use

<a routerLink="add">Add</a>

or

<a routerLink="/manufacturers/add">Add</a>

Only ShowManufacturersComp display. How to fix this problem, tks

Answer 1

ShowManufacturerComponent is configured to have child routes.

In the component template you need to include a router-outlet.