Angular Sub Sub Module Routing

Viewed 126

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},
    ]
  }
]

} ];

0 Answers
Related