¿Qué es un NgModule?

Question

Accepted Answer

Un **NgModule** es una clase decorada con `@NgModule` que agrupa componentes, directivas, pipes y servicios relacionados en un bloque cohesivo, indicando a Angular cómo compilarlos y conectarlos entre sí. (Nota: Angular moderno favorece cada vez más los **componentes independientes** sobre NgModules, pero comprender NgModules sigue siendo esencial para la mayoría de las bases de código existentes.)

## Anatomía de un 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 {}
```

## Los cuatro arrays clave

```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
```

Un componente solo puede declararse en **un** módulo y debe declararse (o importarse como independiente) para ser utilizable en las plantillas de ese módulo.

## El módulo raíz

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

Cada aplicación (no independiente) tiene un `AppModule` raíz con un array `bootstrap` que nombra el componente de inicio.

## Módulos de características y organización

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

Las aplicaciones se organizan en **módulos de características** (uno por área de dominio) y un **módulo compartido** (componentes/pipes comunes), manteniendo la base de código modular y permitiendo carga perezosa por característica.

## El cambio a independientes

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

Angular moderno permite que los componentes sean **independientes** — declarando sus propias dependencias directamente — reduciendo o eliminando el boilerplate de NgModule.

## Por qué es importante

NgModules es el mecanismo tradicional de organización y conexión de dependencias de Angular — comprender `declarations`/`imports`/`exports`/`providers` es necesario para navegar la gran mayoría de las aplicaciones Angular existentes y para comprender la carga perezosa.

Aunque el código nuevo tiende hacia componentes independientes, el conocimiento de NgModule sigue siendo esencial para el trabajo real en Angular.