In Angular, a module is a mechanism to group different components, directives, pipes and services etc. that are inter-related, in such a way that can be combined with other modules to create an application.
Previously we scafolded a new Angular application in which we have integrated
- Scaffolded the angular application
- FontAwesome Library for icons
- Bootstrap Library for styling buttons
- Bootstrap NavBar component
- Routing for multiple components e.g. (CreateAccountComponent, ManageAccountsComponent, DepositFundsComponent, TransferFundsComponent) for which we have already configured routing. Also we have commented code of links in app.component.html as below :
<ul>
<li>
<a><i class="fas fa-chart-line"></i> Dashboard</a>
</li>
<div>
<li>
<a [routerLink]="['/transfer-funds']"
><i class="fas fa-random"></i> Transfer Funds</a
>
</li>
<li>
<a [routerLink]="['/deposit-funds']"
><i class="fas fa-money-check-alt"></i>Deposit Funds</a
>
</li>
<li>
<a [routerLink]="['/create-account']"
><i class="fas fa-user"></i> Create New Account</a
>
</li>
<li>
<a [routerLink]="['/manage-accounts']"
><i class="fas fa-users"></i> Manage Accounts</a
>
</li>
</div>
</ul>
- SideNav having links which are navigating to these pages
In this exercise we are going to split our application into three modules
- Shared module in which we have components which are common to all application (toolbar, sidenav, and dashboard)
- Bank manager module (create account and manage accounts)
- Account holder module (transfer funds and deposit funds)
- We will implement the lazy loading of these modules in our application
Create a new module name Shared which will generate a new file shared.module.ts in shared folder.
ng g m shared
Now we will move our three common components inside the shared folder
- Dashboard
- ToolBar
- SideNav
We will remove one module for the SideNav which is MatSidenavModule from app.module.ts.
There we also need to update all the related paths in the application for these components and remove the imports from the app.module.ts file.
Add these components in the declaration section of shared module and MatSidenavModule to imports array of the shared.module.ts.
Finally, we need to add the Router module in imports array of the shared.module.ts.
declarations: [
SidenavComponent,
ToolbarComponent,
DashboardComponent
],
imports: [
CommonModule,
MatSidenavModule,
RouterModule
]
Since, shared module will be used in any other module of the application. So, we will export the components (Dashboard, Toolbar, and Sidenav) from shared.module.ts by adding these to exports parameter of NgModule decorator.
exports: [ToolbarComponent, SidenavComponent, MatSidenavModule];
When we run our application using
ng serve
ng g m shared
Now we will generate a new module for bank manager with its routing module.
ng g m bank-manager --routing
Move the components from root to bank-manager module
- Create account
- Manage account
Remove the imports from the app.module.ts file and add to declarations array of bank-manager module.
declarations: [
CreateAccountComponent,
ManageAccountsComponent
],
Export these components from the bank-manager module.
exports: [CreateAccountComponent, ManageAccountsComponent];
Update the sidenav component for bank-manager pages
<li>
<a [routerLink]="['bank-manager/create-account']"
><i class="fas fa-user"></i> Create New Account</a
>
</li>
<li>
<a [routerLink]="['bank-manager/manage-accounts']"
><i class="fas fa-users"></i> Manage Accounts</a
>
</li>
Add the routing for the bank-manager.routing.module.ts file
const routes: Routes = [
{ path: "bank-manager", component: DashboardComponent },
{ path: "create-account", component: CreateAccountComponent },
{ path: "manage-accounts", component: ManageAccountsComponent },
];
In order to load the bank-manager module we update the app-routing.module.ts
{
path: 'bank-manager',
loadChildren: () => import('src/app/bank-manager/bank-manager.module').then((m) => m.BankManagerModule),
}
Now we will generate a new module for account holder with its routing module.
ng g m account-holder --routing
Move the components from root to bank-manager module
- Deposit funds
- Transfer funds
Remove the imports from the app.module.ts file and add to declarations array of account-holder module.
declarations: [
DepositFundsComponent,
TransferFundsComponent,
],
Export these components from the account-holder module.
exports: [DepositFundsComponent, TransferFundsComponent];
Update the sidenav component for bank-manager pages
<li>
<a [routerLink]="['account-holder/transfer-funds']"
><i class="fas fa-random"></i> Transfer Funds</a
>
</li>
<li>
<a [routerLink]="['account-holder/deposit-funds']"
><i class="fas fa-money-check-alt"></i>Deposit Funds</a
>
</li>
Add the routing for the account-holder.routing.module.ts file
const routes: Routes = [
{ path: "account-holder", component: DashboardComponent },
{ path: "deposit-funds", component: DepositFundsComponent },
{ path: "transfer-funds", component: TransferFundsComponent },
];
In order to load the account-holder module we update the app-routing.module.ts
{
path: 'account-holder',
loadChildren: () => import('src/app/account-holder/account-holder.module').then((m) => m.AccountHolderModule),
}