Angular - Feature Module

This chapter will discuss the Angular feature module. It is a module that is not generated automatically, we need to create it manually to organize similar data in the application.

Feature Module in Angular

In Angular, a feature module is a "custom module" created by "developers" once the application is built or initiated. This module helps partition the application into focused areas for better organization. It shares a common features or functionalities across the application.

You can create different feature modules for various functionalities. For example, an authentication module to handle user "login" and "signup", while an admin module provides a separate dashboard for "user management". Additionally, a shared module can include common elements like the "header" and "footer".

Important! To use the feature module in your application, make sure that the feature module is imported into the root module (older version) and AppComponent (latest version).

Feature Module vs Root Module

Here are the few differences between the feature and root modules −

Important! As per the latest angular version, the application are created as standalone, so the applications are no more depend on the root module (i.e., AppModule).

How to Create a Feature Module in Angular?

To create a feature module in your Angular application, you need to create a "custom module" and generate some components, directives, services, and routing that belong to this module. So this module can share its features throughout the entire application.

Follow and implement the steps given below in any existing application, if not create a new application and implement the same.

Step 1: Open any existing project in your preferred code editor (e.g., vs code) or create a new project using the following command:

 ng new myApp 

Redirect to the application directory by using the cd myApp command.

Step 2: Create a Module

Create a new module (that will be considered as a feature module), Admin using the following command:

 ng generate module admin --routing 

Here,

The --routing flag will create its own routing file, where you can define routes for all its related components.

Let's create the components and services within the admin module, which will include the related functionality for the admin.

Step 3: Create Components

Create two components, About and Contact using the following command:

 ng generate component admin/About ng generate component admin/Contact 

Here,

The admin/ path specifies that the component will be created within the Admin module.

Step 3: Create a Service

Create a service class, adminService, using the following command:

 ng generate service adminService 

Note: After executing all the above "components" and 'services" within the admin module, you will be able to see all the admin-related components, services, and routing functionalities organized within the admin module. This will give you a clear understanding of the application structure.

Step 4: Define routes

Open the admin-routing.module.ts file and define the routes to navigate the admin components:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AboutComponent } from './about/about.component'; import { ContactComponent } from './contact/contact.component'; const routes: Routes = [ {path: 'about', component: AboutComponent}, {path: 'contact', component: ContactComponent} ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class AdminRoutingModule { } 

Let's see how to use the created feature module in our angular application, myApp.

How to use a Feature Module in Angular?

In this section, we will discuss how to use the Admin feature module we created in our Angular application.

Step 1: Importing Feature Module

Open the app.component.ts file in your code editor, import the AdminModule, and add it to the imports array:

 import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, RouterOutlet } from '@angular/router'; import { AdminModule } from './admin/admin.module'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet, AdminModule, RouterModule], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'myApp'; } 

Step 2: Define Routes for Admin Module

Open the app-routing.module.ts file and define routes for the Admin module to navigate through its components when the admin route is active:

 import { Routes } from '@angular/router'; export const routes: Routes = [ { path: 'admin', loadChildren:() => import('./admin/admin.module').then(m => m.AdminModule) } ]; 

Important! The above routing strategy performs lazy loading, which means it will load the individual admin components only when required.

Step 3: Rendering Feature module Component Template

Open the app.component.html file and create links to click to navigate to the respective component template:

 <h3>Welcome to Angular Feature Module</h3> <hr> <p>MyLinks</p> <a routerLink="admin/about">About</a> <a routerLink="admin/contact">Contact</a> <br><br><hr> <router-outlet></router-outlet> 

Step 4: Run the application using the following command:

 ng serve 

Step 5: Open your preferred browser and navigate to the localhost:4200 URL.

The application will look like:

Advantages of Feature Module

Here are some of the advantages of the feature module:

• Reusability: Feature modules can be reused across different applications or in different parts of the same application.
• Organized structure: By partitioning the application into different parts based on roles and functionalities, you can create a well-organized application structure.
• Improved testing: Testing becomes more straightforward by using feature modules.
• Consistent Dependencies: Each module can manage its own dependencies.

Conclusion

In conclusion, the feature modules offer some key benefits that enhance the development and maintenance of large applications. Their reusability allows for efficient use across different projects, while an organized structure helps maintain a clean and manageable codebase that anyone can understand very easily.