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:

1// features/samurai/samurai.module.ts
2@NgModule({
3  declarations: [
4    SamuraiListComponent,
5    SamuraiDetailComponent,
6    SamuraiFormComponent
7  ],
8  imports: [
9    CommonModule,
10    SharedModule,
11    SamuraiRoutingModule
12  ],
13  exports: [SamuraiListComponent]
14})
15export class SamuraiModule { }

2. Shared Module (Common Resources)

Contains reusable elements:

1// shared/shared.module.ts
2@NgModule({
3  declarations: [
4    ButtonComponent,
5    CardComponent,
6    LoadingSpinnerComponent,
7    HighlightDirective,
8    TruncatePipe
9  ],
10  imports: [CommonModule],
11  exports: [
12    // We export EVERYTHING that can be used in other modules
13    CommonModule,
14    ButtonComponent,
15    CardComponent,
16    LoadingSpinnerComponent,
17    HighlightDirective,
18    TruncatePipe
19  ]
20})
21export class SharedModule { }

3. Core Module (Command Center)

Singletons and elements loaded once:

1// core/core.module.ts
2@NgModule({
3  imports: [
4    CommonModule,
5    HttpClientModule
6  ],
7  providers: [
8    AuthService,
9    LoggingService,
10    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
11  ]
12})
13export class CoreModule {
14  // Protection against multiple imports
15  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
16    if (parentModule) {
17      throw new Error('CoreModule already loaded. Import only in AppModule!');
18    }
19  }
20}

Directory Structure

1src/app/
2├── core/                      # Singleton services, guards, interceptors
3│   ├── core.module.ts
4│   ├── services/
5│   │   ├── auth.service.ts
6│   │   └── api.service.ts
7│   ├── guards/
8│   └── interceptors/
9│
10├── shared/                    # Reusable components, directives, pipes
11│   ├── shared.module.ts
12│   ├── components/
13│   ├── directives/
14│   └── pipes/
15│
16├── features/                  # Feature modules
17│   ├── samurai/
18│   │   ├── samurai.module.ts
19│   │   ├── samurai-routing.module.ts
20│   │   ├── components/
21│   │   ├── services/
22│   │   └── models/
23│   └── dojo/
24│
25├── app.module.ts
26├── app.component.ts
27└── app-routing.module.ts