Can someone please explain why my routing isn't working here? Both AdminComponent and BlogAdminComponent are shell components (e.g. <router-outlet></router-outlet>). I would expect BlogAdminComponent to load up the DashboardComponent but it doesn't. I was able to get this to work by listing the children under blog within home-admin routes and removing blog routes completely. App, home-admin, and blog are modules which is why the each have their own routing.module files.
app/app-routing.module (folder)
const routes: Routes = [
{path: '', component: ComingSoonComponent},
{path: 'home-admin', component: AdminComponent},
{path: '**', redirectTo: ''},
];
app/home-admin/home-admin-routing.module (sub folder)
const routes: Routes = [
{
path: 'home-admin', component: AdminComponent,
children: [
{
path: '',
children: [
{path: '', redirectTo: 'blog', pathMatch: 'full'},
{path: 'blog', component: BlogAdminComponent,
},
{path: 'demo', component: DemoComponent},
{path: 'notified', component: NotifiedComponent},
]
}
]
}
];
app/home-admin/blog/blog-routing.module (sub sub folder)
const routes: Routes = [
{
path: 'home-admin/blog', component: BlogAdminComponent,
children: [
{
path: '',
children: [
{path: '', component: DashboardComponent},
{path: 'create', component: CreateBlogComponent},
]
}
]
} ];