Angular Feature Modules – Scaling Large Applications - Learn ANGULAR | Revochamp

Name: Angular Feature Modules – Scaling Large Applications
Availability: InStock
Author: Revochamp

What is a Feature Module?

As your application grows, the Root Module (AppModule) can become a cluttered 'God Object' that is difficult to manage. A Feature Module is an NgModule that helps you partition the application into focused areas. As a Technical Lead, you use feature modules to group related components, directives, and pipes together. This creates clear boundaries between different domains of your app—like a 'User Dashboard' versus an 'Admin Panel'—and is the prerequisite for implementing Lazy Loading.

Types of Feature Modules

Not all modules serve the same purpose. In a professional architecture, we categorize modules based on their responsibilities.

Domain Feature Modules: Deliver a specific user experience (e.g., EditorModule). They contain components, private services, and models related to that feature.
Routed Feature Modules: Domain modules whose top-level components are the targets of router navigation (used with loadChildren).
Service Modules: Provide utility services (e.g., CoreModule for authentication or logging). They usually only contain 'providers' and no declarations.
Widget/Shared Modules: Contain reusable components (buttons, spinners) and pipes that are imported by many other feature modules.

Creating and Importing a Feature Module

When you create a feature module, you typically import CommonModule (which provides *ngIf and *ngFor) instead of BrowserModule (which belongs only in the root).

BASHRead-only

# Generate a feature module with its own routing
ng generate module features/dashboard --routing

# Generate a feature module with its own routing
ng generate module features/dashboard --routing

TypeScriptRead-only

@NgModule({
  declarations: [DashboardComponent, SummaryWidgetComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ],
  exports: [DashboardComponent] // Export only what other modules need to see
})
export class DashboardModule { }

@NgModule({
  declarations: [DashboardComponent, SummaryWidgetComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ],
  exports: [DashboardComponent] // Export only what other modules need to see
})
export class DashboardModule { }

The Shared Module Pattern

To avoid importing standard libraries (like Angular Material) into every single feature module, architects often create a SharedModule. This module imports and then re-exports common modules, making them available to any feature module that imports the SharedModule.

TypeScriptRead-only

@NgModule({
  imports: [CommonModule, MatButtonModule, MatIconModule],
  exports: [CommonModule, MatButtonModule, MatIconModule, CustomSpinnerComponent]
})
export class SharedModule { }

@NgModule({
  imports: [CommonModule, MatButtonModule, MatIconModule],
  exports: [CommonModule, MatButtonModule, MatIconModule, CustomSpinnerComponent]
})
export class SharedModule { }

Module Communication Table

Module Type	Imports	Exports	Providers
Root (App)	BrowserModule, FeatureModules	None	Global App Services
Feature	CommonModule, SharedModule	Main Feature Component	Feature-specific Services
Shared	CommonModule, UI Libraries	UI Components & Directives	Avoid (can cause duplicates)
Core	CommonModule	None	Singleton App-wide Services

Test Your Knowledge

of 3

What is the primary benefit of organizing an app into Feature Modules?

It makes the CSS load faster

It allows for Lazy Loading and better code organization

It removes the need for TypeScript

It automatically connects to Firebase

of 3

Which module should be imported in a feature module to use directives like *ngIf?

BrowserModule

CommonModule

AppModule

FormsModule

of 3

In the Shared Module pattern, what must you do to a component so other modules can use it?

Declare it in 'providers'

Add it to the 'exports' array

Add it to the 'bootstrap' array

Nothing, it is shared automatically

Frequently Asked Questions

Should I put services in a SharedModule?

Generally, no. If a SharedModule is imported by multiple lazy-loaded modules, and it contains providers, each module might get its own instance of the service. Keep services in a 'CoreModule' or use 'providedIn: root' to ensure they remain singletons.

Can one feature module import another?

Yes, but be careful of circular dependencies (Module A imports B, and B imports A). If two modules need the same component, that component should probably be moved to a 'SharedModule'.

Why use CommonModule instead of BrowserModule in feature modules?

BrowserModule contains the code to launch (bootstrap) the application in the browser. You only want that to happen once in the Root Module. Feature modules only need common directives, which are provided by CommonModule.

@NgModule({ declarations: [DashboardComponent, SummaryWidgetComponent], imports: [ CommonModule, DashboardRoutingModule ], exports: [DashboardComponent] // Export only what other modules need to see }) export class DashboardModule { }

Module Type

Imports

Exports

Providers

Root (App)

BrowserModule, FeatureModules

None

Global App Services

Feature

CommonModule, SharedModule

Main Feature Component

Feature-specific Services

Shared

CommonModule, UI Libraries

UI Components & Directives

Avoid (can cause duplicates)

Core

CommonModule

None

Singleton App-wide Services

Test Your Knowledge

of 3

What is the primary benefit of organizing an app into Feature Modules?

It makes the CSS load faster

It allows for Lazy Loading and better code organization

It removes the need for TypeScript

It automatically connects to Firebase

of 3

Which module should be imported in a feature module to use directives like *ngIf?

BrowserModule

CommonModule

AppModule

FormsModule

of 3

In the Shared Module pattern, what must you do to a component so other modules can use it?

Declare it in 'providers'

Add it to the 'exports' array

Add it to the 'bootstrap' array

Nothing, it is shared automatically

Frequently Asked Questions

Should I put services in a SharedModule?

Can one feature module import another?

Yes, but be careful of circular dependencies (Module A imports B, and B imports A). If two modules need the same component, that component should probably be moved to a 'SharedModule'.

Why use CommonModule instead of BrowserModule in feature modules?

Angular Feature Modules – Scaling Large Applications

Angular Feature Modules – Scaling Large Applications

What is a Feature Module?

Types of Feature Modules

Creating and Importing a Feature Module

The Shared Module Pattern

Module Communication Table

Test Your Knowledge

Frequently Asked Questions

Need help?

Angular Feature Modules – Scaling Large Applications

Angular Feature Modules – Scaling Large Applications

What is a Feature Module?

Types of Feature Modules

Creating and Importing a Feature Module

The Shared Module Pattern

Module Communication Table

Test Your Knowledge

Frequently Asked Questions

Need help?