Los módulos en Angular 18 son contenedores que agrupan componentes, directivas, pipes y servicios que están relacionados. Cada aplicación Angular tiene al menos un módulo, el módulo raíz AppModule
. Los módulos permiten dividir la aplicación en partes más pequeñas y manejables, facilitando la reutilización y mantenimiento del código.
Creación de un módulo
Para crear un módulo en Angular 18, se utiliza el decorador @NgModule
. A continuación, se muestra un ejemplo básico de cómo definir un módulo:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example/example.component';
@NgModule({
declarations: [
ExampleComponent
],
imports: [
CommonModule
],
exports: [
ExampleComponent
]
})
export class ExampleModule { }
En este ejemplo, el módulo ExampleModule
declara un componente ExampleComponent
y lo importa desde CommonModule
. También se exporta ExampleComponent
para que pueda ser utilizado en otros módulos.
Tipos de módulos
Módulo raíz
El módulo raíz es el punto de entrada de la aplicación Angular. Se define en el archivo app.module.ts
y se importa en el archivo main.ts
para arrancar la aplicación.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Módulos funcionales
Los módulos funcionales agrupan funcionalidades específicas de la aplicación. Por ejemplo, un módulo de usuarios puede contener componentes, servicios y directivas relacionadas con la gestión de usuarios.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list/user-list.component';
import { UserService } from './user.service';
@NgModule({
declarations: [
UserListComponent
],
imports: [
CommonModule
],
providers: [UserService]
})
export class UserModule { }
Módulos compartidos
Los módulos compartidos contienen componentes, directivas y pipes que se utilizan en múltiples módulos de la aplicación. Estos módulos se importan en otros módulos para compartir su funcionalidad.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent } from './shared/shared.component';
@NgModule({
declarations: [
SharedComponent
],
imports: [
CommonModule
],
exports: [
SharedComponent
]
})
export class SharedModule { }
Importación y exportación de módulos
Guarda tu progreso
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
Para utilizar un módulo en otro módulo, es necesario importarlo. Asimismo, para que los componentes, directivas y pipes de un módulo estén disponibles en otros módulos, deben ser exportados.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ExampleModule } from './example/example.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ExampleModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
En este ejemplo, ExampleModule
se importa en AppModule
, permitiendo que sus componentes sean utilizados dentro del módulo raíz.
Lazy Loading de módulos
El Lazy Loading es una técnica que permite cargar módulos bajo demanda, mejorando el rendimiento de la aplicación. En Angular 18, esto se configura en el enrutador.
const routes: Routes = [
{ path: 'example', loadChildren: () => import('./example/example.module').then(m => m.ExampleModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
En este ejemplo, el módulo ExampleModule
se carga solo cuando el usuario navega a la ruta example
.
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