Concrete examples of each Angular module type, illustrating their structure, purpose, and usage

               1. Root Module (AppModule)

The entry point of the application. Bootstraps the root component and imports core dependencies.

Example: app.module.ts

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [AppComponent], // Root component
  imports: [
    BrowserModule,
    AppRoutingModule,          // Root routing
    CoreModule.forRoot(),      // Singleton services
  ],
  bootstrap: [AppComponent],   // Bootstrapped component
})
export class AppModule {}

---

2. Feature Module (UserModule)

Encapsulates a feature (e.g., user management). Typically lazy-loaded.

Example: user/user.module.ts

typescript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';
import { UserRoutingModule } from './user-routing.module';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [
    UserListComponent,     // Feature components
    UserDetailComponent
  ],
  imports: [
    CommonModule,
    SharedModule,          // Reusable UI components
    UserRoutingModule,     // Feature-specific routes
  ],
})
export class UserModule {}

Lazy Loading in app-routing.module.ts

typescript

const routes: Routes = [
  {
    path: 'users',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),
  },
];

---

3. Shared Module (SharedModule)

Contains reusable components, directives, and pipes used across multiple modules.

Example: shared/shared.module.ts

typescript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ButtonComponent } from './button/button.component';
import { HighlightDirective } from './highlight.directive';
import { DatePipe } from './date.pipe';

@NgModule({
  declarations: [
    ButtonComponent,      // Reusable component
    HighlightDirective,   // Attribute directive
    DatePipe              // Custom pipe
  ],
  imports: [
    CommonModule,
    FormsModule,
  ],
  exports: [
    // Export Angular modules to avoid repetitive imports
    CommonModule,
    FormsModule,
    // Export reusable components/directives/pipes
    ButtonComponent,
    HighlightDirective,
    DatePipe
  ],
})
export class SharedModule {}

---

4. Core Module (CoreModule)

Holds app-wide singleton services and configurations. Imported once in AppModule.

Example: core/core.module.ts

typescript

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AuthService } from './auth.service';
import { Logger } from './logger.service';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    AuthService,   // Singleton auth service
    Logger         // App-wide logging
  ],
})
export class CoreModule {
  // Prevent re-importing CoreModule
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule is already loaded. Import it only in AppModule.');
    }
  }

  // Optional: Configure root providers
  static forRoot(): ModuleWithProviders<CoreModule> {
    return {
      ngModule: CoreModule,
      providers: [/* Additional providers */],
    };
  }
}

---

5. Routing Module (UserRoutingModule)

Defines routes specific to a feature module.

Example: user/user-routing.module.ts

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserListComponent } from './user-list/user-list.component';
import { UserDetailComponent } from './user-detail/user-detail.component';

const routes: Routes = [
  { path: '', component: UserListComponent },         // /users
  { path: ':id', component: UserDetailComponent },    // /users/123
];

@NgModule({
  imports: [RouterModule.forChild(routes)], // forChild() for feature routes
  exports: [RouterModule],
})
export class UserRoutingModule {}

---

6. Lazy-Loaded Feature Module (AdminModule)

A feature module loaded on-demand for better performance.

Example: admin/admin.module.ts

typescript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { AdminRoutingModule } from './admin-routing.module';

@NgModule({
  declarations: [AdminDashboardComponent],
  imports: [
    CommonModule,
    AdminRoutingModule, // Routes for admin
  ],
})
export class AdminModule {}

Lazy Loading Configuration

typescript

// app-routing.module.ts
{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
}

---

Key Takeaways

1. Root Module: Bootstraps the app and imports global dependencies.

2. Feature Module: Organizes code by feature (lazy-loaded for performance).

3. Shared Module: Centralizes reusable components/directives/pipes.

4. Core Module: Manages app-wide singletons (services, interceptors).

5. Routing Module: Isolates route configurations for maintainability.

By structuring your app this way, you ensure scalability, reusability, and optimal performance! 🚀