Angular Feature Modules

When you use the Angular CLI command to build a new Angular project, you get a new app as well as a module called AppModule. You could code the entire app in this module, but that is not a smart idea because it would cause the app to load very slowly, depending on how large the app is. You must divide a large app into feature modules so that you can test it.

1. Try not to load the entire program at once.

2. In the background, pre-load feature modules

3. When a user accesses a feature module’s functionality, lazy load feature modules on demand.

In this post, you will learn about the benefits of feature modules and lazy loading of a feature module, as well as the impact it has on the load time of an app.

Step 1:-

Create a new Angular Project

ng new feature-demo

Step 2:-

Add the following Package to your application

npm i jquery
npm i bootstrap

Step 3:-

Add the class=”container” in your body tag.

<body class="container">
  <app-root></app-root>
</body>

Step 4:-

Creating a User Profile Module using the following code

ng generate module user-profile

Step 5:-

Adding a Login Component to the User Profile Module using the following code

ng generate component --module user-profile login

Step 6:-

Add the following code in your login.component.html

<h1>Login</h1>
<hr>
<div class="col-md-4">
  <form autocomplete="off">
    <div class="form-group" >
      <label for="userName">User Name</label>
      <input id="userName" type="text" class="form-control" placeholder="Please enter User Name" />
    </div>
    <div class="form-group" >
      <label for="password">Password</label>
      <input id="password" type="password" class="form-control" placeholder="Please Enter Password" />
    </div>
        
    <button type="submit" class="btn btn-primary">Login</button>
    <button type="button" class="btn btn-default">Cancel</button>
  </form>
</div>

Step 7:-

Add the following code to your user-profile.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from '../login/login.component';
import { Routes, RouterModule } from '@angular/router';

const routes:Routes = [
  {path: 'login', component: LoginComponent}
];

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class UserProfileModule { }

Step 8:-

Add the following code to your app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 8:-

Add the following code to your app-routing.module.ts

<div class="row">
  <div class="col-md-2">
    <a [routerLink]="['user/login']">Login</a>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <router-outlet></router-outlet>
  </div>
</div>

Step 9:-

Run Your Application

ng serve

This is the benefit of lazily loaded feature modules, in which the code is not loaded into memory until it is required.

Angular Feature Modules

krishna kukadiya

Submit a Comment Cancel reply

Subscribe