NgModules - The Clan System

In feudal Japan, each clan (han) had its own structure, territory, and resources. In Angular, modules play a similar role - they group related elements and define their scope.

What are NgModules?

NgModules are organizational containers in Angular. Although Standalone Components have been preferred since Angular 17+, knowledge of modules is crucial for:

• Working with legacy projects
• Understanding Angular architecture
• Lazy loading (still popular with modules)

Anatomy of an NgModule

1import { NgModule } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { FormsModule } from '@angular/forms';
4
5// Components of this module
6import { SamuraiListComponent } from './samurai-list.component';
7import { SamuraiCardComponent } from './samurai-card.component';
8import { SamuraiDetailComponent } from './samurai-detail.component';
9
10// Services
11import { SamuraiService } from './samurai.service';
12
13@NgModule({
14  // Components, directives, pipes BELONGING to this module
15  declarations: [
16    SamuraiListComponent,
17    SamuraiCardComponent,
18    SamuraiDetailComponent
19  ],
20
21  // Other modules we NEED
22  imports: [
23    CommonModule,  // *ngIf, *ngFor, async pipe, etc.
24    FormsModule    // ngModel, template-driven forms
25  ],
26
27  // Elements SHARED with other modules
28  exports: [
29    SamuraiListComponent,
30    SamuraiCardComponent
31  ],
32
33  // Services available in this module (legacy approach)
34  providers: [
35    SamuraiService
36  ]
37})
38export class SamuraiModule { }

@NgModule Decorator Properties

| Property | Description | Example | |----------|-------------|---------| | declarations | Components, directives, pipes belonging to the module |

[MyComponent, MyDirective]

| | imports | Modules we need |

[CommonModule, FormsModule]

| | exports | Elements shared externally |

[MyComponent]

| | providers | Services (legacy, better to use providedIn) |

[MyService]

| | bootstrap | Main component (only AppModule) |

[AppComponent]

|

AppModule - The Central Castle

1// app.module.ts - main application module
2@NgModule({
3  declarations: [AppComponent],
4  imports: [
5    BrowserModule,      // Required for browser applications
6    AppRoutingModule,   // Routing
7    SamuraiModule,      // Our feature module
8    DojoModule
9  ],
10  providers: [],
11  bootstrap: [AppComponent]  // Startup component
12})
13export class AppModule { }

Picture a module as a clan -

declarations

are the warriors who belong to it,

imports

are the alliances it depends on,

exports

are the forces it lends to others - and

AppModule

, with its

bootstrap

field, is the castle from which the whole application marches out.