What is an NgModule?

Question

Accepted Answer

An **NgModule** is a class decorated with `@NgModule` that groups related components, directives, pipes, and services into a cohesive block, telling Angular how to compile and wire them together. (Note: modern Angular increasingly favors **standalone components** over NgModules, but understanding NgModules is still essential for most existing codebases.)

## Anatomy of an NgModule

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## The four key arrays

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

A component can only be declared in **one** module, and must be declared (or imported as standalone) to be usable in that module's templates.

## The root module

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

Every (non-standalone) app has a root `AppModule` with a `bootstrap` array naming the starting component.

## Feature modules and organization

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

Apps are organized into **feature modules** (one per domain area) and a **shared module** (common components/pipes), keeping the codebase modular and enabling lazy loading per feature.

## The shift to standalone

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

Modern Angular lets components be **standalone** — declaring their own dependencies directly — reducing or eliminating NgModule boilerplate.

## Why it matters

NgModules are the traditional organizing and dependency-wiring mechanism of Angular — understanding `declarations`/`imports`/`exports`/`providers` is necessary to navigate the vast majority of existing Angular apps and to grasp lazy loading.

While new code trends toward standalone components, NgModule knowledge remains essential for real-world Angular work.