Hiprup

What is a module in Angular? What is the purpose of @NgModule?

An NgModule is a container that groups related components, directives, pipes, and services. Marked with the @NgModule decorator. Modern Angular (v15+) prefers standalone components over NgModules.

  • declarations — components, directives, pipes that belong to this module.

  • imports — other modules whose exports this module needs.

  • providers — services available for DI within this module.

  • exports — what this module makes available to importing modules.

  • bootstrap — the root component (only in AppModule).

  • Lazy loading — route-loaded modules ship as separate chunks.

  • Standalone era — new code skips NgModules entirely; standalone: true on components imports their own dependencies.

// NgModule (legacy) — still useful for libraries and lazy chunks
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { UserListComponent } from './user-list.component';
import { UserCardComponent } from './user-card.component';
import { CurrencyFormatPipe } from './currency-format.pipe';
import { UserService } from './user.service';

@NgModule({
  declarations: [UserListComponent, UserCardComponent, CurrencyFormatPipe],
  imports: [CommonModule, ReactiveFormsModule],
  providers: [UserService],
  exports: [UserListComponent]    // visible to importing modules
})
export class UsersModule {}

// Modern equivalent — standalone components
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, UserCardComponent],
  templateUrl: './user-list.component.html'
})
export class UserListComponent {}

The @NgModule block shows the five metadata fields: declarations lists components/directives/pipes owned by this module (each declarable belongs to exactly one module); imports brings in other modules whose exports you need; providers registers services at module scope; exports controls what's visible to importing modules; bootstrap (only on AppModule) names the root component. The standalone equivalent below collapses all of this onto the component itself — imports moves to the component decorator, services use providedIn: 'root', and the module disappears entirely. Modern Angular scaffolds standalone by default.

List the five metadata props: declarations, imports, providers, exports, bootstrap. Then drop the 2026 framing: 'standalone is the default; new code rarely needs @NgModule.'

What is a module in Angular? What is the purpose of @NgModule? | Hiprup