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">

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

<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 class="form-group" >
      <label for="password">Password</label>
      <input id="password" type="password" class="form-control" placeholder="Please Enter Password" />
    <button type="submit" class="btn btn-primary">Login</button>
    <button type="button" class="btn btn-default">Cancel</button>

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}

  declarations: [LoginComponent],
  imports: [
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)}

  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 class="row">
  <div class="col-md-12">

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.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories