Skip to content

Commit 16afbe7

Browse files
authored
Merge pull request #665 from aspnetboilerplate/issue-#6395
Refactored angular template to use the module per page approach
2 parents 4f22bbc + 345fea5 commit 16afbe7

13 files changed

+203
-51
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { AboutComponent } from './about.component';
4+
5+
const routes: Routes = [
6+
{
7+
path: '',
8+
component: AboutComponent,
9+
pathMatch: 'full',
10+
},
11+
];
12+
13+
@NgModule({
14+
imports: [RouterModule.forChild(routes)],
15+
exports: [RouterModule],
16+
})
17+
export class AboutRoutingModule {}

angular/src/app/about/about.module.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule } from '@angular/core';
2+
import { SharedModule } from '@shared/shared.module';
3+
import { AboutRoutingModule } from './about-routing.module';
4+
import { AboutComponent } from './about.component';
5+
6+
@NgModule({
7+
declarations: [AboutComponent],
8+
imports: [SharedModule, AboutRoutingModule],
9+
})
10+
export class AboutModule {}

angular/src/app/app-routing.module.ts

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import { NgModule } from '@angular/core';
22
import { RouterModule } from '@angular/router';
3-
import { AppComponent } from './app.component';
43
import { AppRouteGuard } from '@shared/auth/auth-route-guard';
5-
import { HomeComponent } from './home/home.component';
6-
import { AboutComponent } from './about/about.component';
7-
import { UsersComponent } from './users/users.component';
8-
import { TenantsComponent } from './tenants/tenants.component';
9-
import { RolesComponent } from 'app/roles/roles.component';
10-
import { ChangePasswordComponent } from './users/change-password/change-password.component';
4+
import { AppComponent } from './app.component';
115

126
@NgModule({
137
imports: [
@@ -16,12 +10,39 @@ import { ChangePasswordComponent } from './users/change-password/change-password
1610
path: '',
1711
component: AppComponent,
1812
children: [
19-
{ path: 'home', component: HomeComponent, canActivate: [AppRouteGuard] },
20-
{ path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },
21-
{ path: 'roles', component: RolesComponent, data: { permission: 'Pages.Roles' }, canActivate: [AppRouteGuard] },
22-
{ path: 'tenants', component: TenantsComponent, data: { permission: 'Pages.Tenants' }, canActivate: [AppRouteGuard] },
23-
{ path: 'about', component: AboutComponent, canActivate: [AppRouteGuard] },
24-
{ path: 'update-password', component: ChangePasswordComponent, canActivate: [AppRouteGuard] }
13+
{
14+
path: 'home',
15+
loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
16+
canActivate: [AppRouteGuard]
17+
},
18+
{
19+
path: 'about',
20+
loadChildren: () => import('./about/about.module').then((m) => m.AboutModule),
21+
canActivate: [AppRouteGuard]
22+
},
23+
{
24+
path: 'users',
25+
loadChildren: () => import('./users/users.module').then((m) => m.UsersModule),
26+
data: { permission: 'Pages.Users' },
27+
canActivate: [AppRouteGuard]
28+
},
29+
{
30+
path: 'roles',
31+
loadChildren: () => import('./roles/roles.module').then((m) => m.RolesModule),
32+
data: { permission: 'Pages.Roles' },
33+
canActivate: [AppRouteGuard]
34+
},
35+
{
36+
path: 'tenants',
37+
loadChildren: () => import('./tenants/tenants.module').then((m) => m.TenantsModule),
38+
data: { permission: 'Pages.Tenants' },
39+
canActivate: [AppRouteGuard]
40+
},
41+
{
42+
path: 'update-password',
43+
loadChildren: () => import('./users/users.module').then((m) => m.UsersModule),
44+
canActivate: [AppRouteGuard]
45+
},
2546
]
2647
}
2748
])

angular/src/app/app.module.ts

Lines changed: 3 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,8 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
1010
import { NgxPaginationModule } from 'ngx-pagination';
1111
import { AppRoutingModule } from './app-routing.module';
1212
import { AppComponent } from './app.component';
13-
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
1413
import { SharedModule } from '@shared/shared.module';
15-
import { HomeComponent } from '@app/home/home.component';
16-
import { AboutComponent } from '@app/about/about.component';
17-
// tenants
18-
import { TenantsComponent } from '@app/tenants/tenants.component';
19-
import { CreateTenantDialogComponent } from './tenants/create-tenant/create-tenant-dialog.component';
20-
import { EditTenantDialogComponent } from './tenants/edit-tenant/edit-tenant-dialog.component';
21-
// roles
22-
import { RolesComponent } from '@app/roles/roles.component';
23-
import { CreateRoleDialogComponent } from './roles/create-role/create-role-dialog.component';
24-
import { EditRoleDialogComponent } from './roles/edit-role/edit-role-dialog.component';
25-
// users
26-
import { UsersComponent } from '@app/users/users.component';
27-
import { CreateUserDialogComponent } from '@app/users/create-user/create-user-dialog.component';
28-
import { EditUserDialogComponent } from '@app/users/edit-user/edit-user-dialog.component';
29-
import { ChangePasswordComponent } from './users/change-password/change-password.component';
30-
import { ResetPasswordDialogComponent } from './users/reset-password/reset-password.component';
14+
import { ServiceProxyModule } from '@shared/service-proxies/service-proxy.module';
3115
// layout
3216
import { HeaderComponent } from './layout/header.component';
3317
import { HeaderLeftNavbarComponent } from './layout/header-left-navbar.component';
@@ -42,22 +26,6 @@ import { SidebarMenuComponent } from './layout/sidebar-menu.component';
4226
@NgModule({
4327
declarations: [
4428
AppComponent,
45-
HomeComponent,
46-
AboutComponent,
47-
// tenants
48-
TenantsComponent,
49-
CreateTenantDialogComponent,
50-
EditTenantDialogComponent,
51-
// roles
52-
RolesComponent,
53-
CreateRoleDialogComponent,
54-
EditRoleDialogComponent,
55-
// users
56-
UsersComponent,
57-
CreateUserDialogComponent,
58-
EditUserDialogComponent,
59-
ChangePasswordComponent,
60-
ResetPasswordDialogComponent,
6129
// layout
6230
HeaderComponent,
6331
HeaderLeftNavbarComponent,
@@ -70,6 +38,7 @@ import { SidebarMenuComponent } from './layout/sidebar-menu.component';
7038
SidebarMenuComponent
7139
],
7240
imports: [
41+
AppRoutingModule,
7342
CommonModule,
7443
FormsModule,
7544
ReactiveFormsModule,
@@ -79,10 +48,9 @@ import { SidebarMenuComponent } from './layout/sidebar-menu.component';
7948
BsDropdownModule,
8049
CollapseModule,
8150
TabsModule,
82-
AppRoutingModule,
8351
ServiceProxyModule,
84-
SharedModule,
8552
NgxPaginationModule,
53+
SharedModule
8654
],
8755
providers: []
8856
})
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { HomeComponent } from './home.component';
4+
5+
const routes: Routes = [
6+
{
7+
path: '',
8+
component: HomeComponent,
9+
pathMatch: 'full',
10+
},
11+
];
12+
13+
@NgModule({
14+
imports: [RouterModule.forChild(routes)],
15+
exports: [RouterModule],
16+
})
17+
export class HomeRoutingModule {}

angular/src/app/home/home.module.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { NgModule } from '@angular/core';
2+
import { SharedModule } from '@shared/shared.module';
3+
import { HomeRoutingModule } from './home-routing.module';
4+
import { HomeComponent } from './home.component';
5+
6+
@NgModule({
7+
declarations: [HomeComponent],
8+
imports: [SharedModule, HomeRoutingModule],
9+
})
10+
export class HomeModule {}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { RolesComponent } from './roles.component';
4+
5+
const routes: Routes = [
6+
{
7+
path: '',
8+
component: RolesComponent,
9+
pathMatch: 'full',
10+
},
11+
];
12+
13+
@NgModule({
14+
imports: [RouterModule.forChild(routes)],
15+
exports: [RouterModule],
16+
})
17+
export class RolesRoutingModule {}

angular/src/app/roles/roles.module.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { NgModule } from '@angular/core';
2+
import { SharedModule } from '@shared/shared.module';
3+
import { RolesRoutingModule } from './roles-routing.module';
4+
import { RolesComponent } from './roles.component';
5+
import { CreateRoleDialogComponent } from './create-role/create-role-dialog.component';
6+
import { EditRoleDialogComponent } from './edit-role/edit-role-dialog.component';
7+
8+
@NgModule({
9+
declarations: [RolesComponent, CreateRoleDialogComponent, EditRoleDialogComponent],
10+
imports: [SharedModule, RolesRoutingModule],
11+
})
12+
export class RolesModule {}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { TenantsComponent } from './tenants.component';
4+
5+
const routes: Routes = [
6+
{
7+
path: '',
8+
component: TenantsComponent,
9+
pathMatch: 'full',
10+
},
11+
];
12+
13+
@NgModule({
14+
imports: [RouterModule.forChild(routes)],
15+
exports: [RouterModule],
16+
})
17+
export class TenantsRoutingModule {}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { SharedModule } from '@shared/shared.module';
3+
import { TenantsRoutingModule } from './tenants-routing.module';
4+
import { CreateTenantDialogComponent } from './create-tenant/create-tenant-dialog.component';
5+
import { EditTenantDialogComponent } from './edit-tenant/edit-tenant-dialog.component';
6+
import { TenantsComponent } from './tenants.component';
7+
8+
@NgModule({
9+
declarations: [
10+
CreateTenantDialogComponent,
11+
EditTenantDialogComponent,
12+
TenantsComponent,
13+
],
14+
imports: [SharedModule, TenantsRoutingModule],
15+
})
16+
export class TenantsModule {}

0 commit comments

Comments
 (0)