Para experimentar de manera segura con los módulos, se debe crear una copia del proyecto existente. Estos cambios son solo para práctica y no afectarán el proyecto original. En capítulos posteriores, el enfoque volverá a la construcción de aplicaciones utilizando componentes independientes.

Creación de un módulo para TaskComponent

Este paso consiste en crear un módulo para el TaskComponent. El módulo declarará el componente, una directiva relacionada y un pipe.

Para generar un módulo en Angular, existe un comando específico en la CLI:

Ahora que el archivo task.module.ts ha sido creado dentro de la carpeta task, podemos implementarlo

Este módulo declara el TaskComponent, su directiva asociada y un pipe personalizado. Importa CommonModule para habilitar directivas estructurales como *ngIf y *ngFor. El TaskComponent se exporta para que pueda reutilizarse en otros módulos.

Creación de un módulo para el TaskListComponent

En este paso, se creará un módulo para el TaskListComponent. Crear un nuevo módulo en la carpeta task-list:

Ahora que el archivo task-list.module.ts ha sido creado dentro de la carpeta task-list, se puede implementarlo

Este módulo declara TaskListComponent, responsable de renderizar una lista de tareas. Importa TaskModule para acceder al componente de tarea y FormsModule para funcionalidades como formularios de creación de tareas. El componente se exporta para que pueda ser utilizado en otros módulos.

Creación del módulo raíz

En este paso, se definirá el módulo principal que actúa como punto de inicio de toda la aplicación.

Toda aplicación Angular necesita un módulo raíz que indique a Angular cómo iniciar la aplicación. Este módulo reúne todas las piezas necesarias: funcionalidades integradas de Angular, nuestros módulos personalizados y el componente raíz.

Cree un nuevo módulo en la carpeta app:

La bandera --flat indica al Angular CLI que cree el archivo del módulo sin generar una carpeta separada.

Este módulo funciona como el punto de entrada de la aplicación. Importa BrowserModule, que es necesario para ejecutar Angular en el navegador, y TaskListModule, que contiene la funcionalidad principal para la gestión de tareas. El AppComponent se establece como el componente raíz para iniciar la aplicación.

Configuración del punto de entrada

Este paso actualiza el punto de entrada de la aplicación para iniciarse utilizando el módulo raíz en lugar de un componente independiente.

Abre main.ts y reemplaza su contenido con lo siguiente:

Este código inicia la aplicación utilizando AppModule. Esta configuración ilustra la arquitectura modular: la aplicación se divide en módulos, cada uno encapsulando sus propios componentes, directivas, pipes, servicios y más.

La arquitectura modular en Angular ayuda a organizar la aplicación en bloques lógicos, haciendo que el código sea escalable, bien estructurado y reutilizable.