Angular with child routes load child components below parent component instead of redirecting it to another view

Question

I have a MuscleComponent which has MuscleAddComponent and MuscleEditComponent as its child components. I am trying to redirect to its child components when I click on them but instead they appear on the same view of MuscleComponent.

Note: When I have { path: '', component: MusclesComponent, pathMatch: 'full' }, in the children of muscle path I get two same appearance of MuscleComponent's html on same page. Why is it so? and Why when I click on Add button it shows the content of MuscleAddComponent on MuscleComponent's html?

app-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: 'muscles', component: MusclesComponent, children: [
      { path: '', component: MusclesComponent, pathMatch: 'full' },
      { path: 'add', component: MuscleAddComponent },
      { path: ':id', component: MuscleEditComponent }
    ]
  },
  { path: 'workouts', component: WorkoutsComponent },
  { path: 'myplanner', component: MyPlannerComponent },
  { path: '**', redirectTo: '' }
];

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="../assets/images/logo.png" height="60px" style="padding: 0px; margin: 0px;">
    </a>
    <app-menus></app-menus>
</nav>
<router-outlet></router-outlet>

muscles.component.html

<div class="container-fluid">
    <div class="row" style="padding: 25px;">
        <div class="col-md-6">
            <h2>Manage Muscles</h2>
        </div>
        <div class="col-md-6">
            <div class="float-right">
                <button type="button" class="btn btn-secondary" [routerLink]="['./add']">Add New</button>
            </div>
        </div>
    </div>
</div>

<router-outlet></router-outlet>

Any help is highly appreciated.

Solution

Try to use forChild in your muscles.module.ts:

RouterModule.forChild([
{
    path: 'muscles', component: MusclesComponent, children: [
      { path: '', component: MusclesComponent, pathMatch: 'full' },
      { path: 'add', component: MuscleAddComponent },
      { path: ':id', component: MuscleEditComponent }
    ]
  },
])

or if you don't have separate module muscles.module.ts:

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'muscles', component: MusclesComponent, pathMatch: 'full'}
  { path: 'muscles/add', component: MuscleAddComponent },
  { path: 'muscles/:id', component: MuscleEditComponent },
  { path: 'workouts', component: WorkoutsComponent },
  { path: 'myplanner', component: MyPlannerComponent },
  { path: '**', redirectTo: '' }
];

Your routes were working incorrectly as your components such as MuscleAddComponent, MuscleEditComponent are not actually children. I mean they are separate components, because they do not have some shared module. So you don't have to use children property. As an example from Angular docs:

src/app/crisis-center/crisis-center-routing.module.ts (Routes):

const crisisCenterRoutes: Routes = [
  {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

Pay attention that the above route is created in separate module .../crisis-center-routing.module.ts.

Comments

[Reyan Chougle]

So you mean to say that we must have a separate routing module for each parent component?

[StepUp]

I mean if you have separate module for muscles.module.ts, then you should use forchild

[Reyan Chougle]

I have a single AppModule with single Routing Module. What can be done in this case?

[Reyan Chougle]

Thanks a lot. It worked. But could you please explain why that happened?

[StepUp]

@ReyanChougle I am glad to help you. Great! Please, see my updated answer.