Feature Modules - Provinces of the Kingdom

Feature modules divide the application into logical parts - like provinces of feudal Japan, each with its own specialization.

Types of Modules

1. Feature Module (Province)

Groups business functionality:

// features/samurai/samurai.module.ts
@NgModule({
  declarations: [
    SamuraiListComponent,
    SamuraiDetailComponent,
    SamuraiFormComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    SamuraiRoutingModule
  ],
  exports: [SamuraiListComponent]
})
export class SamuraiModule { }

2. Shared Module (Common Resources)

Contains reusable elements:

// shared/shared.module.ts
@NgModule({
  declarations: [
    ButtonComponent,
    CardComponent,
    LoadingSpinnerComponent,
    HighlightDirective,
    TruncatePipe
  ],
  imports: [CommonModule],
  exports: [
    // We export EVERYTHING that can be used in other modules
    CommonModule,
    ButtonComponent,
    CardComponent,
    LoadingSpinnerComponent,
    HighlightDirective,
    TruncatePipe
  ]
})
export class SharedModule { }

3. Core Module (Command Center)

Singletons and elements loaded once:

// core/core.module.ts
@NgModule({
  imports: [
    CommonModule,
    HttpClientModule
  ],
  providers: [
    AuthService,
    LoggingService,
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class CoreModule {
  // Protection against multiple imports
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule already loaded. Import only in AppModule!');
    }
  }
}

Directory Structure

src/app/
├── core/                      # Singleton services, guards, interceptors
│   ├── core.module.ts
│   ├── services/
│   │   ├── auth.service.ts
│   │   └── api.service.ts
│   ├── guards/
│   └── interceptors/
│
├── shared/                    # Reusable components, directives, pipes
│   ├── shared.module.ts
│   ├── components/
│   ├── directives/
│   └── pipes/
│
├── features/                  # Feature modules
│   ├── samurai/
│   │   ├── samurai.module.ts
│   │   ├── samurai-routing.module.ts
│   │   ├── components/
│   │   ├── services/
│   │   └── models/
│   └── dojo/
│
├── app.module.ts
├── app.component.ts
└── app-routing.module.ts