Imagina que estás construyendo una aplicación. Al principio, es solo un archivo — como main.ts. Pero a medida que avanzas, comienzas a agregar más: componentes, servicios, estilos, lógica, manejo de datos, autenticación, y así sucesivamente.

Tarde o temprano, las cosas empiezan a desordenarse — es difícil saber qué se está utilizando y dónde, o cómo se conecta todo.

Es entonces cuando la modularidad se convierte en tu mejor aliada.

¿Qué es un módulo en Angular?

Piensa en un módulo como una caja donde guardas todo lo relacionado con una característica específica. Por ejemplo, todo lo relacionado con usuarios podría ir en un UserModule.

En Angular, un módulo es simplemente una clase marcada con el decorador @NgModule, así:

Esto es lo que hace cada parte:

• declarations – lista los componentes, directivas y pipes que pertenecen a este módulo;

• imports – importa otros módulos de los que depende este módulo (como BrowserModule para el acceso al DOM);

• providers – declara los servicios (para inyección de dependencias) disponibles en este módulo;

• bootstrap – define el componente principal que se carga cuando inicia la aplicación (usualmente AppComponent).

Básicamente, un módulo define qué recibe (sus dependencias), qué pone a disposición de otros módulos, y así sucesivamente.

Cualquier componente que interactúe con este módulo puede usar los servicios y otros recursos que proporciona.

Por qué no estamos usando módulos en este momento

A partir de Angular 14, existe una nueva alternativa: componentes independientes.

Estos permiten crear y utilizar un componente sin necesidad de incluirlo en un módulo. De hecho, los hemos estado utilizando a lo largo de nuestro proyecto, y se ven así:

Este es un componente independiente, lo que significa que no necesita ser listado en ningún NgModule bajo declarations. En su lugar, todo lo que necesita (como directivas, pipes u otros módulos) se importa directamente a través de la propiedad imports dentro del propio componente.

Esto hace que la estructura del proyecto sea más ligera y flexible, especialmente útil para aplicaciones pequeñas o bloques de funcionalidades aisladas.

Aunque los proyectos más recientes de Angular no requieren módulos, aún los encontrarás con frecuencia:

• Las aplicaciones empresariales antiguas están construidas completamente usando módulos;

• Muchos tutoriales, documentación y ejemplos todavía están escritos con NgModule;

• Algunas bibliotecas de terceros y frameworks de interfaz de usuario aún utilizan el enfoque basado en módulos.