title: Angular with child routes load child components below parent component instead of redirecting it to another view
body: <p>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.</p>
  
  <p>Note: When I have <code>{ path: '', component: MusclesComponent, pathMatch: 'full' },</code> 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?</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>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: '' }
  ];
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
      &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="../assets/images/logo.png" height="60px" style="padding: 0px; margin: 0px;"&gt;
      &lt;/a&gt;
      &lt;app-menus&gt;&lt;/app-menus&gt;
  &lt;/nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>muscles.component.html</strong></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row" style="padding: 25px;"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;h2&gt;Manage Muscles&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="float-right"&gt;
                  &lt;button type="button" class="btn btn-secondary" [routerLink]="['./add']"&gt;Add New&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Any help is highly appreciated.</p>