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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

// Components of this module
import { SamuraiListComponent } from './samurai-list.component';
import { SamuraiCardComponent } from './samurai-card.component';
import { SamuraiDetailComponent } from './samurai-detail.component';

// Services
import { SamuraiService } from './samurai.service';

@NgModule({
  // Components, directives, pipes BELONGING to this module
  declarations: [
    SamuraiListComponent,
    SamuraiCardComponent,
    SamuraiDetailComponent
  ],

  // Other modules we NEED
  imports: [
    CommonModule,  // *ngIf, *ngFor, async pipe, etc.
    FormsModule    // ngModel, template-driven forms
  ],

  // Elements SHARED with other modules
  exports: [
    SamuraiListComponent,
    SamuraiCardComponent
  ],

  // Services available in this module (legacy approach)
  providers: [
    SamuraiService
  ]
})
export class SamuraiModule { }

A note for Angular 19 and later: components are standalone by default, and such a component cannot be listed in declarations - the compiler reports error NG6008. A component that belongs to an NgModule needs standalone: false in its decorator; a standalone component is added to a module through imports.

@NgModule Decorator Properties

AppModule - The Central Castle

// app.module.ts - main application module
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,      // Required for browser applications
    AppRoutingModule,   // Routing
    SamuraiModule,      // Our feature module
    DojoModule
  ],
  providers: [],
  bootstrap: [AppComponent]  // Startup component
})
export 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.

import { Component } from '@angular/core';
import { SamuraiModule } from './samurai/samurai.module';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SamuraiModule],
  template: `
    <div class="dojo">
      <header>
        <h1>Clans and Provinces</h1>
        <p>Module 3: Code Organization in Angular</p>
      </header>

      <main>
        <section class="info-panel">
          <h2>Module Structure</h2>
          <p>Clans (modules) organize warriors (components) into logical groups.</p>
          <ul>
            <li>Feature Modules - functionalities</li>
            <li>Shared Modules - shared elements</li>
            <li>Core Module - singleton services</li>
          </ul>
        </section>

        <section class="demo-panel">
          <h2>Samurai Clan (Feature Module)</h2>
          <app-samurai-list></app-samurai-list>
        </section>
      </main>
    </div>
  `,
  styles: [`
    .dojo {
      font-family: 'Segoe UI', sans-serif;
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      min-height: 100vh;
      color: #eee;
    }
    header {
      text-align: center;
      border-bottom: 2px solid #c9a227;
      padding-bottom: 20px;
    }
    h1 { color: #c9a227; }
    h2 { color: #c9a227; }
    .info-panel, .demo-panel {
      background: rgba(255,255,255,0.05);
      border: 1px solid #c9a227;
      border-radius: 8px;
      padding: 20px;
      margin: 20px 0;
    }
    ul { list-style: none; padding: 0; }
    li::before { content: "» "; }
  `]
})
export class AppComponent {}