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.
¿Te está gustando esta lección?
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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 { }
Aprendizajes de esta lección
- Comprender la organización modular de aplicaciones en Angular.
- Dominar la creación de módulos.
- Aprender a importar y a exportar módulos.
- Conocer las secciones de un módulo.
Completa Angular y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs