Tutorial Angular: Desarrollo de módulos Angular

Los módulos son un componente fundamental en la arquitectura de Angular, actuando como contenedores que agrupan componentes, directivas, pipes y servicios relacionados para formar unidades funcionales cohesivas.

Importancia de los módulos

Los módulos son fundamentales en Angular por varias razones:

1. Organización del código: Permiten una mejor estructuración y organización del código fuente.

2. Reutilización: Facilitan la reutilización de componentes y servicios en diferentes partes de una aplicación o incluso entre diferentes aplicaciones.

3. Lazy loading: Posibilitan la carga diferida de partes de una aplicación para mejorar el rendimiento.

4. Encapsulación: Ayudan a encapsular características y funcionalidades en bloques de código independientes.

5. Optimización de compilación: Permiten una compilación más eficiente mediante la agrupación lógica de componentes.

Creación de módulos

Para crear un módulo en Angular, se utiliza el comando de Angular CLI:

ng generate module MiModulo

Este comando genera un archivo .module.ts que contendrá la definición del módulo.

Estructura de un módulo

Un módulo en Angular se define mediante el decorador @NgModule. Este decorador acepta un objeto de metadatos que describe cómo se debe compilar el módulo y qué elementos incluye.

Ejemplo de un módulo básico:

// task.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TaskListComponent } from './task-list/task-list.component';
import { TaskDetailComponent } from './task-detail/task-detail.component';
import { TaskService } from './task.service';

@NgModule({
  declarations: [
    TaskListComponent,
    TaskDetailComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
  TaskListComponent
  ],
  providers: [
    TaskService
  ]
})
export class TaskModule { }

En este ejemplo, TaskModule agrupa los componentes TaskListComponent y TaskDetailComponent, así como el servicio TaskService. El módulo también importa el módulo CommonModule, que proporciona directivas y funcionalidades comunes.

Secciones de un módulo

Un módulo típicamente contiene las siguientes secciones:

1. Declarations: Lista de componentes, directivas y pipes pertenecientes al módulo.

2. Imports: Otros módulos cuyas exportaciones son necesarias para los componentes de este módulo.

3. Exports: Componentes, directivas y pipes que deben estar disponibles para otros módulos.

4. Providers: Servicios que el módulo contribuye a la colección global de servicios.

Ejemplo de módulo con secciones

// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { FeatureService } from './feature.service';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  providers: [FeatureService],
  exports: [FeatureComponent]
})
export class FeatureModule { }

Módulo raíz (AppModule)

El módulo principal de una aplicación Angular se conoce como AppModule. Este módulo se crea automáticamente al iniciar un nuevo proyecto y es responsable de arrancar la aplicación. Es importante mencionar que este funcionamiento es en versiones de Angular 16 y anteriores.

Ejemplo de AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskModule } from './task/task.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TaskModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

En este ejemplo, AppModule importa tanto el módulo BrowserModule como el módulo personalizado TaskModule. También define el componente raíz AppComponent y establece que este componente se utilizará como punto de inicio para la aplicación.

Eliminación del módulo raíz (AppModule) en Angular 17+

En Angular 17 y versiones posteriores, el módulo raíz (AppModule) ya no se crea por defecto en los nuevos proyectos. En lugar de depender de un módulo raíz, Angular ha avanzado hacia el uso de componentes independientes (standalone components) y la nueva sintaxis de control de flujo.

Ejemplo de configuración sin módulo raíz:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskComponent } from './task/task.component';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserModule),
    importProvidersFrom(TaskComponent)
  ]
});

En este ejemplo, se utiliza bootstrapApplication para arrancar la aplicación directamente con AppComponent y se importan los proveedores necesarios, eliminando así la necesidad de un módulo raíz tradicional.

Importación y exportación de módulos

Los módulos pueden importar funcionalidades de otros módulos y también pueden exportar funcionalidades a otros módulos.

Ejemplo de importación y exportación

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FeatureModule } from './feature/feature.module'; // Importación del módulo
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FeatureModule // Uso del módulo importado
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Lazy Loading

Angular permite configurar lazy loading mediante el enrutador de la aplicación, cargando módulos solo cuando son necesarios. Esto mejora significativamente el rendimiento inicial de la aplicación al cargar solo lo necesario.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'tasks', loadChildren: () => import('./task/task.module').then(m => m.TaskModule) },
  { path: 'users', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }