Feature modules for organization in Angular

Introduction

Feature modules help keep your Angular app neat and tidy by grouping related parts together. This makes your app easier to understand and work on.

You want to separate user login and profile features from the main app.

You have a big app and want to split it into smaller, manageable pieces.

You want to load some parts of your app only when needed to save resources.

You want different teams to work on different parts of the app without conflicts.

Syntax

Angular

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-feature',
  template: `<p>Feature works!</p>`,
})
export class FeatureComponent {}

import { NgModule } from '@angular/core';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  exports: [FeatureComponent]
})
export class FeatureModule {}

A feature module is an Angular module that groups related components, directives, and pipes.

Use NgModule to define a feature module and list its parts inside.

Examples

This feature module groups the user profile component.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserProfileComponent } from './user-profile.component';

@NgModule({
  declarations: [UserProfileComponent],
  imports: [CommonModule],
  exports: [UserProfileComponent]
})
export class UserProfileModule {}

This feature module groups admin dashboard features and imports routing support.

Angular

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AdminDashboardComponent } from './admin-dashboard.component';

@NgModule({
  declarations: [AdminDashboardComponent],
  imports: [RouterModule],
  exports: [AdminDashboardComponent]
})
export class AdminModule {}

Sample Program

This example shows a feature module called FeatureModule that contains a simple component. The main app module imports this feature module and uses its component in the app.

Angular

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-feature',
  template: `<p>Feature module loaded!</p>`
})
export class FeatureComponent {}

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  exports: [FeatureComponent]
})
export class FeatureModule {}

@Component({
  selector: 'app-root',
  template: `<h1>Welcome</h1><app-feature></app-feature>`
})
export class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FeatureModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Important Notes

Feature modules help keep code organized and easier to maintain.

You can lazy load feature modules to improve app speed.

Always import CommonModule in feature modules to use common Angular directives like *ngIf and *ngFor.

Summary

Feature modules group related parts of an Angular app.

They make apps easier to manage and understand.

Import feature modules into the main app module to use their components.