Angular Modules

1. What is an NgModule

An NgModule groups related components, directives, and pipes together. It was the primary way to structure Angular apps before standalone components arrived in Angular 14.

NgModules are not deprecated — they are still fully supported in Angular 21. Only platformBrowserDynamic (the old bootstrap function) was deprecated. The recommended path for new projects is standalone components, but NgModules remain valid for existing codebases.

2. NgModule Anatomy

The @NgModule decorator accepts five main properties:

@NgModule({

  declarations: [App],

  bootstrap: [App],

  imports: [BrowserModule, CommonModule, Tasks, NewTask, Task, User, Header, RouterOutlet],

})

export class AppModule {}

3. declarations vs imports

This is the most common source of confusion when mixing modules with standalone components.

• 
  declarations — only for non-standalone components (standalone: false). They are private to this module unless explicitly exported.


• 
  imports — for other NgModules and for standalone components, directives, and pipes (the default since Angular 17).

Putting a standalone component in declarations causes a compile error. Putting a non-standalone component in imports also causes an error.

// non-standalone component — belongs in declarations

@Component({

  standalone: false,

  selector: 'app-root',

  templateUrl: './app.html',

  styleUrl: './app.css',

})

export class App {}

// standalone component (Angular 17+ default) — belongs in imports, not declarations

@Component({

  selector: 'app-header',

  templateUrl: './header.html',

})

export class Header {}

@NgModule({

  declarations: [App],                          // non-standalone

  imports: [BrowserModule, Header, RouterOutlet], // standalone components go here

  bootstrap: [App],

})

export class AppModule {}

A non-standalone component also cannot have an imports array in @Component — it delegates all imports to its module.

4. BrowserModule vs CommonModule

Never import BrowserModule in a feature module — import CommonModule instead. Importing BrowserModule twice throws a runtime error.

5. Bootstrapping with NgModule

Use platformBrowser().bootstrapModule() from @angular/platform-browser. The older platformBrowserDynamic from @angular/platform-browser-dynamic was deprecated in Angular 21.

// main.ts

import { platformBrowser } from '@angular/platform-browser';

import { AppModule } from './app/app.module';



platformBrowser().bootstrapModule(AppModule)

  .catch((err: unknown) => console.error(err));

6. Feature Modules

Feature modules group a slice of the app (e.g. tasks, users) to keep AppModule small. They export only what the rest of the app needs.

// tasks/tasks.module.ts

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { TasksComponent } from './tasks.component';



@NgModule({

  declarations: [TasksComponent],

  imports: [CommonModule],

  exports: [TasksComponent],

})

export class TasksModule {}

// app.module.ts

@NgModule({

  declarations: [App],

  imports: [BrowserModule, TasksModule],

  bootstrap: [App],

})

export class AppModule {}

7. Lazy-Loaded Feature Modules

Lazy loading defers loading a module's bundle until the user navigates to its route. Configure it with loadChildren in the router:

// app.routes.ts

export const routes: Routes = [

  {

    path: 'tasks',

    loadChildren: () =>

      import('./tasks/tasks.module').then((m) => m.TasksModule),

  },

];

// tasks/tasks.module.ts — use forChild, not forRoot

@NgModule({

  declarations: [TasksComponent],

  imports: [

    CommonModule,

    RouterModule.forChild([{ path: '', component: TasksComponent }]),

  ],

})

export class TasksModule {}

The root module uses RouterModule.forRoot(routes). Feature modules use RouterModule.forChild(routes).

8. NgModule vs Standalone

NgModules are still valid and fully supported. Understanding them is essential for working with existing Angular codebases.