I've set up a router-outlet in app.component.html, admin.component.html, and manage-users.component.html. However, I'm facing an issue where the router-outlet in manage-users.component.html is not showing anything when I navigate to http://localhost:4200/admin/users
The file structure is organized as follows:
/Admin (Module)
admin.component.html (includes router-outlet)
admin.component.ts
admin.module.ts
admin-routing.module.ts
/Manage-Users (Module within Admin module)
manage-users.component.html (includes router-outlet)
manage-users.component.ts
manage-users.module.ts
manage-users-routing.module.ts
/User-List (component displayed in manage-users outlet)
...
/User-Detail (component displayed in manage-users outlet)
...
There are 3 levels of routes defined:
// App Routes (app-routing.module.ts)
const appRoutes: Routes = [
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuard] },
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
// Admin Module Routes (admin-routing.module.ts)
const adminRoutes: Routes = [
{
path: '',
component: AdminComponent,
children: [
{ path: 'users', component: ManageUsersComponent }
]
}
];
// Admin Module > Manage Users Module Routes (manage-users-routing.module.ts)
const manageUsersRoutes: Routes = [
{
path: '',
component: ManageUsersComponent,
children: [
{path: '', component: UserListComponent},
{path: 'edit/:id', component: UserDetailComponent}
]
}
];
Here's how my ManageUsers.module is structured:
@NgModule({
declarations: [
ManageUsersComponent,
UserListComponent,
UserDetailComponent
],
imports: [
CommonModule,
SharedModule,
ManageUsersRoutingModule
],
providers: [
UserService
]
})
export class ManageUsersModule { }
And this is the setup of my Admin.module:
@NgModule({
declarations: [
AdminComponent
],
imports: [
CommonModule,
AdminRoutingModule,
ManageUsersModule
]
})
export class AdminModule { }