Навигация по маршрутизатору Angular 6 не отображает дочерний компонент в целевом компоненте

У меня есть приложение Angular 6 с компонентом входа в систему и компонентом панели инструментов. Я пытаюсь перейти к DashboardComponent в событии нажатия кнопки входа в систему. DashboardComponent содержит дочерний компонент WardComponent. Но при переходе к панели управления он отображает только содержимое, отличное от дочернего компонента ward. Как я могу отобразить компонент панели мониторинга с дочерним компонентом после входа в систему?

Пожалуйста, посмотрите мои классы компонентов ниже

AppComponent

<router-outlet></router-outlet>

LoginComponent.ts

  export class LoginComponent {
  constructor(private router: Router) {}

  login() {
    this.router.navigate(["/dashboard/"]);
  }
}

DashboardComponent

import { Component } from "@angular/core";
@Component({
  selector: "dashboard",
  template: `
    haii u r in dashboard compo

    <div class="form-inline" style="padding: 40px;">
      <ward *ngFor="let ward of wards" [wardNumber]="ward"></ward>
    </div>
  `
})
export class DashboardComponent {
  constructor() {}
}

WardComponent.ts

import { Component, Input } from "@angular/core";
@Component({
  selector: "ward",
  template: `
    <div class="card bg-light mb-3" style="max-width: 18rem;">
      <div class="card-header"></div>
      <div class="card-body">
        <h2 class="card-title">{{ wardNumber + 1 }}</h2>
        <button class="btn btn-primary" (click)="checkIn()">check in</button>
        <button class="btn btn-primary" (click)="checkOut()">check Out</button>
      </div>
    </div>
  `
})
export class WardComponent {
  @Input() wardNumber: Number;
  checkedIn: boolean = false;
  constructor() {}

  checkIn() {
    console.log("checked in");
    this.checkedIn = true;
  }

  checkOut() {}
}

app.module.ts

  const indexRoutes: Route = {
  path: "",
  component: DashboardComponent
};
// for all invalid routers , it will redirect to login component
const fallbackRoutes = {
  path: "**",
  component: LoginComponent
};

const routes: Routes = [
  indexRoutes,

  {
    path: "dashboard",
    component: DashboardComponent
  },

  {
    path: "ward",
    component: WardComponent
  },

  fallbackRoutes
];

@NgModule({
  declarations: [
    AppComponent,
    WardComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}