I am attempting to follow the feature-module approach in Angular.
I have an application with an Admin module. Within this module will be sub modules (ie User-Management, Project-Management).
Below is the structure I came up with:
app.component.css
app.component.html
app.component.ts
app.module.ts
app-routing.module.ts
admin/
admin.component.css
admin.component.html
admin.component.ts
admin.module.ts
admin-routing.module.ts
user-management/
user-management.component.css
user-management.component.html
user-management.component.ts
user-management.module.ts
user-management-routing.module.ts
user-list/
user-list.component.css
user-list.component.html
user-list.component.ts
user-detail/
user-detail.component.css
user-detail.component.html
user-detail.component.ts
project-management/
project-management.component.css
project-management.component.html
project-management.component.ts
project-management.module.ts
project-management-routing.module.ts
project-list/
project-list.component.css
project-list.component.html
project-list.component.ts
project-detail/
project-detail.component.css
project-detail.component.html
project-detail.component.ts
Correct me if I am wrong, but I believe the above structure is as textbook as it gets. I am really struggling to make routing work with this approach.
Please see my routes below:
const appRoutes: Routes = [
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad:
[AuthGuard] },
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
const adminRoutes: Routes = [
{
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'users', component: UserManagementComponent },
{ path: 'projects', component: ProjectManagementComponent }
]
}
]
}
];
const manageUsers: Routes = [
{path: 'users', component: UserListComponent},
{path: 'users/edit/:id', component: UserDetailComponent}
];
const manageProjects: Routes = [
{path: 'projects', component: ProjectListComponent},
{path: 'projects/edit/:id', component: ProjectDetailComponent}
];
The way I would like things to navigate is the following:
/admin (displays nothing besides the admin.component.html layout - someday will be display a dashboard component)
/admin/users (displays a listing of users)
/admin/users/edit/1 (displays detail of a user)
I think my main struggle is the fact that I have a user-management component and what really is supposed to be displayed on it by default is the user-list component. There is a router-outlet in the admin.component.html and there is a router-outlet in the user-management.component.html. Is a double route-outlet needed for something like this or should I just be displaying directly on the user-management-component.html page instead of a router-outlet?
Here is a routing structure that would directly correspond to your proposed module component hierarchy:
const appRoutes: Routes = [
{
path: 'admin',
component: AdminComponent, // has <router-outlet>
children: [
{
path: 'users',
component: UserManagementComponent, // has <router-outlet>
children: [
{
path: '',
component: UserListComponent
},
{
path: 'edit/:id',
component: UserDetailComponent
}
]
},
{
path: 'projects',
component: ProjectManagementComponent, // has <router-outlet>
children: [
{
path: '',
component: ProjectListComponent
},
{
path: 'edit/:id',
component: ProjectDetailComponent
}
]
}
]
},
{ path: '', redirectTo: '/admin' },
{ path: '**', component: PageNotFoundComponent }
];
This would give you a main "admin" page which would display nothing besides the HTML from the template (if it contained anything aside from the <router-outlet>
). When navigating to /admin/users
, it would display the UserListComponent
inside of the UserManaementComponent
(considering that UserManagementComponent
has a <router-outlet>
). If you click on a link to a /admin/users/edit/:id
(where :id
is some ID), then the UserListComponent
would get swapped with the UserDetailComponent
inside of the UserManagementComponent
.
Likewise for the "project" side.
If you want to break out into feature modules, you could do so like this:
app-routing/module.ts
// From 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/admin-routing.module.ts
// From /admin/admin-routing.module.ts
const ADMIN_ROUTES: Routes = [
{
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'users', loadChildren: './admin/user-management/user-management.module#UserManagementModule' },
{ path: 'projects', loadChildren: './admin/project-management/project-management.module#ProjectManagementModule' }
]
}
]
}
];
/admin/user-management/user-management-routing.module.ts
// From /admin/user-management/user-management-routing.module.ts
const USER_MANAGEMENT_ROUTES: Routes = [
{path: '', component: UserListComponent},
{path: 'edit/:id', component: UserDetailComponent}
];
/admin/project-management/project-management-routing.module.ts
// From /admin/project-management/project-management-routing.module.ts
const PROJECT_MANAGEMENT_ROUTES: Routes = [
{path: '', component: ProjectListComponent},
{path: 'edit/:id', component: ProjectDetailComponent}
];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.