Populating a child router-outlet Angular2 not working

Question

The solution below was the first attempt as below.

1. Created app.module.ts and app.route.ts.
2. Created default for app.component.ts. The app.component router is working as expected so far for the first level routing.
3. Created a new module called Dashboard, with dashboard.module.ts and dashboard.routes.ts.
4. I imported the dashboard into the app.module.ts.
5. Created Sitebar,Header, and HeaderNav in the Dashboard.component.ts with child . But, no idea why the child navigation always shows in the first level router-outlet, instead of the child router-outlet.

Dashboard.component.ts code below.

    <div class="wrapper">
  <app-mydash-sidebar
    [headerText]="'No Rush'"
    [headerLink]="'http://www.bit-numbers.com'"
    [headerLogoImg]="'/assets/img/angular2-logo-white.png'"
    [backgroundColor]="'red'"
    [backgroundImg]="'/assets/img/sidebar-5.jpg'"
    [navItems]="navItems">
  </app-mydash-sidebar>

  <div class="main-panel">
    <app-mydash-navbar [navItems]="navItems"></app-mydash-navbar>

    <router-outlet ></router-outlet>
  </div>

</div>

app.component.ts below.

  <router-outlet></router-outlet>

Any idea?

app.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MembersComponent } from './members/members.component';
import { AuthGuard } from './auth.service';
import { SignupComponent } from './signup/signup.component';
import { EmailComponent } from './email/email.component';
import { HomeComponent } from './home/home.component';
import { BookingsComponent } from './bookings/bookings.component';
export const router: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'signup', component: SignupComponent },
    { path: 'login-email', component: EmailComponent },
    { path: 'members', component: MembersComponent, canActivate: [AuthGuard] },
    { path: '', component: LoginComponent},
    { path: 'bookings', component: BookingsComponent },
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

mydash.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from '../auth.service';
import { MydashBookingsComponent } from '../mydash/mydash-bookings/mydash-bookings.component';
import { MydashChartComponent } from '../mydash/mydash-chart/mydash-chart.component';
import { MydashDashboardComponent } from '../mydash-dashboard/mydash-dashboard.component';
export const Dashboardrouter: Routes = [
{
    path: 'dashboard',
    children: [{
        path: '',
        pathMatch: 'full',
        component: MydashDashboardComponent
    },
    {
        path: 'mybookings',
        component: MydashBookingsComponent
    }]
}
];
export const DashboardRouting: ModuleWithProviders = RouterModule.forChild(Dashboardrouter);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { EmailComponent } from './email/email.component';
import { SignupComponent } from './signup/signup.component';
import { MembersComponent } from './members/members.component';
import { AuthGuard } from './auth.service';
import { routes } from './app.routes';
import { IconsComponent } from './icons/icons.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { UserComponent } from './user/user.component';
import { MydashModule } from './mydash/mydash.module';
import { HomeComponent } from './home/home.component';
import { BookingsComponent } from './bookings/bookings.component';
import {FirebaseServiceService} from './services/firebase-service.service';


// Must export the config
export const firebaseConfig = {
   ...
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    EmailComponent,
    SignupComponent,
    MembersComponent,
    IconsComponent,
    NotificationsComponent,
    UserComponent,
    HomeComponent,
    BookingsComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig),
     MydashModule,
    routes,

  ],
  providers: [AuthGuard,FirebaseServiceService],
  bootstrap: [AppComponent],

})
export class AppModule { }

mydash.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MydashChartComponent } from './mydash-chart/mydash-chart.component';
import { MydashCheckboxComponent } from './mydash-checkbox/mydash-checkbox.component';
import { MydashCloseLayerComponent } from './mydash-close-layer/mydash-close-layer.component';
import { MydashFooterComponent } from './mydash-footer/mydash-footer.component';
import { MydashNavbarComponent } from './mydash-navbar/mydash-navbar.component';
import { MydashSidebarComponent } from './mydash-sidebar/mydash-sidebar.component';
import { MydashSidebarItemsComponent } from './mydash-sidebar-items/mydash-sidebar-items.component';
import { MydashTableComponent } from './mydash-table/mydash-table.component';
import { MydashTaskListComponent } from './mydash-task-list/mydash-task-list.component';
import { MydashUserProfileComponent } from './mydash-user-profile/mydash-user-profile.component';
import { MydashNavbarItemsComponent } from './mydash-navbar-items/mydash-navbar-items.component';
import { MydashBookingsComponent } from './mydash-bookings/mydash-bookings.component';
import { DashboardRouting} from './mydash.routes';
import { MydashDashboardComponent } from '../mydash-dashboard/mydash-dashboard.component';
export interface DropdownLink {
  title: string;
  routerLink?: string;
}

export enum NavItemType {
  Sidebar = 1, // Only ever shown on sidebar
  NavbarLeft = 2, // Left-aligned icon-only link on navbar in desktop mode, shown above sidebar items on collapsed sidebar in mobile mode
  NavbarRight = 3 // Right-aligned link on navbar in desktop mode, shown above sidebar items on collapsed sidebar in mobile mode
}

export interface NavItem {
  type: NavItemType;
  title: string;
  routerLink?: string;
  iconClass?: string;
  numNotifications?: number;
  dropdownItems?: (DropdownLink | 'separator')[];
}
@NgModule({
  imports: [
    CommonModule,
    DashboardRouting,
  ],
  declarations: [
  MydashChartComponent,
  MydashCheckboxComponent,
  MydashCloseLayerComponent,
  MydashFooterComponent,
  MydashNavbarComponent,
  MydashSidebarComponent,
  MydashSidebarItemsComponent,
  MydashTableComponent,
  MydashTaskListComponent,
  MydashUserProfileComponent,
  MydashNavbarItemsComponent,
  MydashBookingsComponent,
  MydashDashboardComponent],

// These components are to export to allow access from the Dashboard. Do it manually, not done by ng CLI.
   exports: [
    MydashSidebarComponent,
    MydashNavbarComponent,
    MydashFooterComponent,
    MydashChartComponent,
    MydashTaskListComponent,
    MydashTableComponent,
    MydashUserProfileComponent,
    MydashCloseLayerComponent,
    MydashBookingsComponent
  ],
  providers:[]
})
export class MydashModule { }

Answer 1

I solved the issue. The problem was because the dashboard component was missing in the file name mydash.routes.ts. I assigned the appropriate component underneath the path: 'dashboard', before the Child routes. Now, it works like a champ. Cheers! The Answer code below.

path: 'dashboard',
    component: MydashDashboardComponent,
    children: [{