El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Carga Perezosa de Módulos

Siguiente ►
►

La carga perezosa (lazy loading) es una técnica de optimización en Angular que permite cargar módulos solo cuando son necesarios, en lugar de cargarlos todos al inicio de la aplicación. Esto mejora el rendimiento inicial de la aplicación, ya que reduce el tiempo de carga y el tamaño del paquete inicial.

Conceptos Clave

  1. Carga Eager vs. Lazy:

    • Eager Loading: Todos los módulos se cargan al inicio de la aplicación.
    • Lazy Loading: Los módulos se cargan solo cuando se navega a una ruta específica que los requiere.

  2. Rutas Hijas: La carga perezosa se configura utilizando rutas hijas en el enrutador de Angular.

  3. Módulos de Características: Los módulos que se cargan perezosamente suelen ser módulos de características que encapsulan una parte específica de la funcionalidad de la aplicación.

Configuración de la Carga Perezosa

Paso 1: Crear un Módulo de Características

Primero, crea un módulo de características que deseas cargar perezosamente. Por ejemplo, un módulo Admin.

ng generate module admin --route admin --module app.module

Este comando crea un módulo Admin y configura automáticamente la ruta para la carga perezosa en el archivo app-routing.module.ts.

Paso 2: Configurar la Ruta para la Carga Perezosa

Asegúrate de que la ruta para la carga perezosa esté configurada correctamente en el archivo app-routing.module.ts.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

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

Paso 3: Configurar las Rutas Hijas en el Módulo de Características

Dentro del módulo Admin, configura las rutas hijas en el archivo admin-routing.module.ts.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';

const routes: Routes = [
  { path: '', component: AdminComponent }
];

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

Paso 4: Crear Componentes y Servicios Necesarios

Crea los componentes y servicios necesarios dentro del módulo Admin.

ng generate component admin/admin-dashboard
ng generate service admin/admin-service

Ejemplo Completo

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

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

admin-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin.component';

const routes: Routes = [
  { path: '', component: AdminComponent }
];

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

admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component';

@NgModule({
  declarations: [AdminComponent],
  imports: [
    CommonModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }

admin.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-admin',
  template: `
    <h1>Admin Dashboard</h1>
    <p>Welcome to the admin dashboard!</p>
  `,
  styles: []
})
export class AdminComponent { }

Ejercicio Práctico

Ejercicio

  1. Crea un nuevo módulo llamado User que se cargue perezosamente.
  2. Configura la ruta para la carga perezosa del módulo User.
  3. Dentro del módulo User, crea un componente UserProfile.
  4. Configura las rutas hijas para que el componente UserProfile se muestre cuando se navegue a la ruta /user.

Solución

Paso 1: Crear el Módulo User

ng generate module user --route user --module app.module

Paso 2: Configurar la Ruta para la Carga Perezosa

Asegúrate de que la ruta esté configurada en app-routing.module.ts.

const routes: Routes = [
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', redirectTo: '/home' }
];

Paso 3: Crear el Componente UserProfile

ng generate component user/user-profile

Paso 4: Configurar las Rutas Hijas en user-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserProfileComponent } from './user-profile/user-profile.component';

const routes: Routes = [
  { path: '', component: UserProfileComponent }
];

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

user.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserRoutingModule } from './user-routing.module';
import { UserProfileComponent } from './user-profile/user-profile.component';

@NgModule({
  declarations: [UserProfileComponent],
  imports: [
    CommonModule,
    UserRoutingModule
  ]
})
export class UserModule { }

user-profile.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  template: `
    <h1>User Profile</h1>
    <p>Welcome to the user profile page!</p>
  `,
  styles: []
})
export class UserProfileComponent { }

Conclusión

La carga perezosa de módulos es una técnica poderosa para optimizar el rendimiento de las aplicaciones Angular. Al cargar módulos solo cuando son necesarios, se puede reducir significativamente el tiempo de carga inicial y mejorar la experiencia del usuario. Asegúrate de utilizar esta técnica en aplicaciones grandes para mantener un rendimiento óptimo.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados