Aprender Angular Módulos

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

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.