Q: Unable to route to children components Angular I'm trying to make use of multiple layout's for my angular application and have followed the below guide as per a previous post example but my child routing doesnt seem to work.
Guide I followed:
https://stackblitz.com/edit/angular-multi-layout-example
My app routing module
const routes: Routes = [
path: '', component: BaseComponent, canActivate: [AuthGuard], data: {
      title: 'Base Layout', children: [
        { path: '', component: DashboardComponent, data: { title: 'Dashboard' } },
        { path: 'dashboard', component: DashboardComponent, data: { title: 'Dashboard' } }
    }
]

 { path: 'login', component: AuthComponent, data: { title: 'Login' } },
  { path: 'logout', component: AuthLogoutComponent, data: { title: 'Logout' } },

  { path: '404', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

how im trying to navigate to a child component in my navigation component
<a [routerLink]="['/dashboard']" class="list-group-item list-group-item-action bg-light">Dashboard</a>

in my base component html:
<navigation></navigation>
 <router-outlet></router-outlet>

In my app.component.html:
<router-outlet></router-outlet>

In my index.html i have
<html>
<body>
  <app-root></app-root>
</body>
</html>

I can route to the non-children components fine, and it seems like the base component is working because my navigation appears on path '', but if i try navigate to any child it seems to throw the error:
Error: Cannot match any routes. URL Segment: 'dashboard'


A: Please use children route like this . Don't need to pass in data object  
const routes: Routes = [
  { path: '', component: DashboardComponent, children: [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardPageComponent },
    { path: 'product', component: ProductManagementComponent },
    { path: 'home', component: HomeComponent }
]}

