Feature modules for organization in Angular - Step-by-Step Execution

Concept Flow - Feature modules for organization

Create Feature Module

↓

Declare Components/Services

↓

Import Feature Module in Root or Parent Module

↓

Angular Loads Feature Module

↓

Feature Module Components Available

↓

App Organized and Scalable

This flow shows how you create a feature module, declare its parts, import it, and then Angular loads it to keep the app organized.

Execution Sample

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';
@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  exports: [FeatureComponent]
})
export class FeatureModule {}

Defines a simple feature module with one component, showing how to declare and export it.

Execution Table

Step	Action	Module/Component State	Result
1	Create FeatureComponent	FeatureComponent declared	Component ready to use
2	Create FeatureModule	FeatureModule declared with FeatureComponent	Module groups component
3	Import CommonModule in FeatureModule	CommonModule available	Common directives usable
4	Export FeatureComponent from FeatureModule	FeatureComponent exported	Component usable outside module
5	Import FeatureModule in AppModule	FeatureModule imported	App can use FeatureComponent
6	Angular loads FeatureModule	FeatureModule initialized	FeatureComponent registered
7	Use <app-feature> in app template	FeatureComponent rendered	Displays 'Feature works!'
8	App runs with organized modules	AppModule + FeatureModule	App is scalable and maintainable
9	Exit	All modules loaded	App ready

💡 All modules loaded and app is ready with feature module components available

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
FeatureComponent	undefined	Declared	Declared	Declared and exported
FeatureModule	undefined	Declared	Imported in AppModule	Initialized by Angular
AppModule	Declared without FeatureModule	No change	Imports FeatureModule	Initialized with FeatureModule

Key Moments - 3 Insights

Why do we export FeatureComponent from FeatureModule?

Exporting FeatureComponent (see step 4 in execution_table) makes it usable outside the feature module, like in the root app module.

What happens if we don't import FeatureModule in AppModule?

If FeatureModule is not imported (step 5), Angular won't know about FeatureComponent, so using <app-feature> will cause an error.

Why import CommonModule in FeatureModule?

CommonModule (step 3) provides common Angular directives like *ngIf and *ngFor, needed inside feature module components.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is FeatureComponent made available outside the feature module?

A Step 2

B Step 4

C Step 5

D Step 7

💡 Hint

Check the 'Export FeatureComponent' action in step 4 of the execution_table

According to variable_tracker, when does AppModule know about FeatureModule?

A After Step 2

B After Step 7

C After Step 5

D At Start

💡 Hint

Look at the AppModule row in variable_tracker after Step 5

If we remove CommonModule import from FeatureModule, what will happen?

A Angular will throw an error on *ngIf or *ngFor usage

B FeatureModule won't load

C FeatureComponent won't render at all

D No effect, app runs normally

💡 Hint

Recall why CommonModule is imported in step 3 and its role in directives

Concept Snapshot

Feature modules group related components and services.
Declare components inside the feature module.
Import CommonModule for common Angular directives.
Export components to use them outside.
Import feature modules in the root or parent module.
This keeps the app organized and scalable.

Full Transcript

Feature modules in Angular help organize your app by grouping related components and services. You create a feature module, declare components inside it, and import CommonModule to use Angular's common directives. Exporting components from the feature module makes them usable outside. Then, you import the feature module into the root or parent module. Angular loads the feature module, making its components available in the app. This approach keeps your app organized and easier to maintain as it grows.