Angular 17+: Enrutamiento Avanzado, Lazy Loading y Precarga

// ❌ Sin lazy loading - todos los módulos cargados a la vezconst routes: Routes = [  { path: 'dashboard', component: DashboardComponent },  { path: 'users', component: UsersComponent },  { path: 'products', component: ProductsComponent },  { path: 'analytics', component: AnalyticsComponent },  // Bundle inicial gigante = 2MB+];// ✅ Con lazy loading - carga bajo demandaconst routes: Routes = [  {     path: 'dashboard',     loadComponent: () => import('./dashboard/dashboard.component')  },  {     path: 'users',     loadChildren: () => import('./users/users.routes')  },  // Bundle inicial = 300KB, módulos cargados según necesidad];

// main.tsimport { bootstrapApplication } from '@angular/platform-browser';import { provideRouter } from '@angular/router';import { AppComponent } from './app/app.component';import { routes } from './app/app.routes';bootstrapApplication(AppComponent, {  providers: [    provideRouter(routes),    // otros providers...  ]});

// app.module.tsimport { RouterModule } from '@angular/router';@NgModule({  imports: [    RouterModule.forRoot(routes, {      enableTracing: false, // solo para depuración      preloadingStrategy: PreloadAllModules    })  ],  // ...})export class AppModule { }

// app.routes.tsimport { Routes } from '@angular/router';export const routes: Routes = [  // Ruta básica standalone  {    path: '',    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)  },    // Lazy loading de feature completa  {    path: 'dashboard',    loadChildren: () => import('./dashboard/dashboard.routes').then(m => m.dashboardRoutes)  },    // Redirección y wildcard  { path: '', redirectTo: '/home', pathMatch: 'full' },  { path: '**', loadComponent: () => import('./not-found/not-found.component') }];

// feature/product/product.component.tsimport { Component } from '@angular/core';@Component({  selector: 'app-product',  standalone: true,  imports: [CommonModule, RouterModule],  template: `    <div class="product-container">      <h2>Catálogo de Productos</h2>      <router-outlet></router-outlet>    </div>  `})export class ProductComponent { }

// app.routes.tsimport { Routes } from '@angular/router';import { inject } from '@angular/core';import { AuthGuard } from './guards/auth.guard';export const routes: Routes = [  // Componente standalone con lazy loading  {    path: 'profile',    canActivate: [() => inject(AuthGuard).canActivate()],    loadComponent: () => import('./profile/profile.component')      .then(m => m.ProfileComponent)  },    // Feature module completo con subrutas  {    path: 'products',    loadChildren: () => import('./products/products.routes')      .then(m => m.productRoutes),    data: { preload: true } // Marca para precarga  },    // Carga condicional basada en permisos  {    path: 'admin',    canMatch: [() => inject(AuthGuard).hasAdminRole()],    loadChildren: () => import('./admin/admin.routes')  }];

// products/products.routes.tsimport { Routes } from '@angular/router';export const productRoutes: Routes = [  {    path: '',    loadComponent: () => import('./product-layout.component')      .then(m => m.ProductLayoutComponent),    children: [      {        path: '',        loadComponent: () => import('./product-list/product-list.component')      },      {        path: 'category/:id',        loadComponent: () => import('./product-category/product-category.component'),        data: { preload: true }      },      {        path: 'details/:id',        loadComponent: () => import('./product-details/product-details.component'),        resolve: {          product: () => inject(ProductService).getProduct(            inject(ActivatedRoute).snapshot.params['id']          )        }      }    ]  }];

// guards/auth.guard.tsimport { inject } from '@angular/core';import { Router } from '@angular/router';import { AuthService } from '../services/auth.service';export const authGuard = () => {  const authService = inject(AuthService);  const router = inject(Router);    if (authService.isAuthenticated()) {    return true;  }    return router.parseUrl('/login');};// Usando el guard{  path: 'dashboard',  canActivate: [authGuard],  loadChildren: () => import('./dashboard/dashboard.routes')}

// strategies/smart-preload.strategy.tsimport { Injectable } from '@angular/core';import { PreloadingStrategy, Route } from '@angular/router';import { Observable, of, timer } from 'rxjs';import { mergeMap } from 'rxjs/operators';@Injectable()export class SmartPreloadStrategy implements PreloadingStrategy {  preload(route: Route, load: () => Observable<any>): Observable<any> {    // Precarga solo si está marcado en los data    if (route.data?.['preload']) {      // Espera 2 segundos después de la carga inicial      return timer(2000).pipe(        mergeMap(() => load())      );    }        return of(null);  }}// Configuración en el providerprovideRouter(routes, withPreloading(SmartPreloadStrategy))

// ❌ Enfoque ingenuo - todo cargado juntoconst routes: Routes = [  { path: 'products', component: ProductsComponent },  { path: 'cart', component: CartComponent },  { path: 'checkout', component: CheckoutComponent },  { path: 'admin', component: AdminComponent },  // Bundle inicial = 3.5MB, tiempo de carga = 8s];// ✅ Nuestro enfoque - carga estratégicaconst routes: Routes = [  {    path: 'products',    loadChildren: () => import('./features/catalog/catalog.routes'),    data: { preload: true } // Probablemente será accedido  },  {    path: 'checkout',    loadChildren: () => import('./features/checkout/checkout.routes')    // Cargado solo cuando es necesario  }  // Bundle inicial = 280KB, carga incremental];

// app.routes.tsimport { Routes } from '@angular/router';import { authGuard } from './guards/auth.guard';import { SmartPreloadStrategy } from './strategies/smart-preload.strategy';export const routes: Routes = [  // Landing page - carga inmediata  {    path: '',    loadComponent: () => import('./features/home/home.component')  },    // Catálogo - precarga habilitada (alta probabilidad de acceso)  {    path: 'products',    loadChildren: () => import('./features/catalog/catalog.routes'),    data: {       preload: true,      priority: 'high'    }  },    // Carrito - carga bajo demanda  {    path: 'cart',    loadChildren: () => import('./features/cart/cart.routes'),    data: { preload: false }  },    // Checkout - carga protegida  {    path: 'checkout',    canActivate: [authGuard],    loadChildren: () => import('./features/checkout/checkout.routes'),    data: {       requiresAuth: true,      preloadOnAuth: true // Precarga cuando el usuario se autentica    }  },    // Admin - acceso restringido  {    path: 'admin',    canMatch: [() => inject(AuthService).hasRole('admin')],    loadChildren: () => import('./features/admin/admin.routes')  }];

// features/catalog/catalog.routes.tsimport { Routes } from '@angular/router';import { productResolver } from './resolvers/product.resolver';export const catalogRoutes: Routes = [  {    path: '',    loadComponent: () => import('./catalog-layout.component'),    children: [      // Lista de productos - vista principal      {        path: '',        loadComponent: () => import('./views/product-list/product-list.component'),        data: {           title: 'Productos',          description: 'Catálogo completo de productos'        }      },            // Categoría específica - precarga activada      {        path: 'category/:slug',        loadComponent: () => import('./views/category/category.component'),        resolve: {          category: (route: ActivatedRouteSnapshot) =>             inject(CategoryService).getBySlug(route.params['slug'])        },        data: { preload: true }      },            // Detalles del producto - resolvers para UX      {        path: 'product/:id',        loadComponent: () => import('./views/product-details/product-details.component'),        resolve: {          product: productResolver,          recommendations: (route: ActivatedRouteSnapshot) =>            inject(RecommendationService).getFor(route.params['id'])        }      },            // Búsqueda - componente ligero      {        path: 'search',        loadComponent: () => import('./views/search/search.component'),        data: {           preload: true,          cache: true // Cachear resultados        }      }    ]  }];

// features/checkout/checkout.routes.tsimport { Routes } from '@angular/router';import { cartGuard } from './guards/cart.guard';import { stepGuard } from './guards/step.guard';export const checkoutRoutes: Routes = [  {    path: '',    canActivate: [cartGuard], // Verifica si hay items en el carrito    loadComponent: () => import('./checkout-layout.component'),    children: [      // Proceso de checkout en pasos      {        path: '',        redirectTo: 'shipping',        pathMatch: 'full'      },            // Paso 1: Dirección de entrega      {        path: 'shipping',        loadComponent: () => import('./steps/shipping/shipping.component'),        data: { step: 1, title: 'Dirección de Entrega' }      },            // Paso 2: Método de pago      {        path: 'payment',        canActivate: [stepGuard(1)], // Solo accede si el paso anterior está completo        loadComponent: () => import('./steps/payment/payment.component'),        data: { step: 2, title: 'Pago' }      },            // Paso 3: Confirmación      {        path: 'review',        canActivate: [stepGuard(2)],        loadComponent: () => import('./steps/review/review.component'),        resolve: {          orderSummary: () => inject(CheckoutService).getOrderSummary()        },        data: { step: 3, title: 'Revisar Pedido' }      },            // Confirmación final      {        path: 'success/:orderId',        loadComponent: () => import('./success/success.component'),        resolve: {          order: (route: ActivatedRouteSnapshot) =>            inject(OrderService).getById(route.params['orderId'])        }      }    ]  }];

// ❌ Limitaciones del enfoque simpleconst routes: Routes = [  { path: 'products', loadChildren: () => import('./products/products.module') },  { path: 'orders', loadChildren: () => import('./orders/orders.module') },  { path: 'analytics', loadChildren: () => import('./analytics/analytics.module') }  // Todas las features en el mismo repositorio = acoplamiento de deploy];

// shell-app/webpack.config.jsconst ModuleFederationPlugin = require('@module-federation/webpack');module.exports = {  plugins: [    new ModuleFederationPlugin({      name: 'shell',      remotes: {        'products-mf': 'products@http://localhost:4201/remoteEntry.js',        'orders-mf': 'orders@http://localhost:4202/remoteEntry.js',        'analytics-mf': 'analytics@http://localhost:4203/remoteEntry.js'      },      shared: {        '@angular/core': { singleton: true, strictVersion: true },        '@angular/common': { singleton: true, strictVersion: true },        '@angular/router': { singleton: true, strictVersion: true }      }    })  ]};// shell-app/src/app/app.routes.tsexport const routes: Routes = [  {    path: 'products',    loadChildren: () => import('products-mf/Routes').then(m => m.routes),    data: {       microfrontend: 'products',      fallback: () => import('./fallbacks/products-fallback.component')    }  },    {    path: 'orders',    loadChildren: () => import('orders-mf/Routes').then(m => m.routes)      .catch(() => import('./fallbacks/orders-fallback.component')),    data: { microfrontend: 'orders' }  },    {    path: 'analytics',    loadChildren: () => import('analytics-mf/Routes').then(m => m.routes),    canLoad: [() => inject(FeatureToggleService).isEnabled('analytics')],    data: { microfrontend: 'analytics' }  }];

// products-mf/webpack.config.jsconst ModuleFederationPlugin = require('@module-federation/webpack');module.exports = {  plugins: [    new ModuleFederationPlugin({      name: 'products',      filename: 'remoteEntry.js',      exposes: {        './Routes': './src/app/app.routes.ts'      },      shared: {        '@angular/core': { singleton: true },        '@angular/common': { singleton: true },        '@angular/router': { singleton: true }      }    })  ]};// products-mf/src/app/app.routes.tsexport const routes: Routes = [  {    path: '',    loadComponent: () => import('./product-shell.component'),    children: [      {        path: '',        loadComponent: () => import('./views/catalog/catalog.component')      },      {        path: 'details/:id',        loadComponent: () => import('./views/details/details.component'),        resolve: {          product: (route: ActivatedRouteSnapshot) =>            inject(ProductService).getProduct(route.params['id'])        }      }    ]  }];

// shell-app/src/app/services/microfrontend-loader.service.ts@Injectable({  providedIn: 'root'})export class MicrofrontendLoaderService {  private failedLoads = new Set<string>();    async loadMicrofrontend(name: string): Promise<any> {    if (this.failedLoads.has(name)) {      return this.loadFallback(name);    }        try {      const module = await import(`${name}-mf/Routes`);      return module.routes;    } catch (error) {      console.warn(`Failed to load ${name} microfrontend:`, error);      this.failedLoads.add(name);      return this.loadFallback(name);    }  }    private async loadFallback(name: string) {    switch (name) {      case 'products':        return import('./fallbacks/products-fallback.routes');      case 'orders':        return import('./fallbacks/orders-fallback.routes');      default:        return import('./fallbacks/generic-fallback.routes');    }  }}// Ruta con fallback automático{  path: 'products',  loadChildren: () => inject(MicrofrontendLoaderService).loadMicrofrontend('products'),  data: { microfrontend: 'products' }}

// types/routing.tsimport { Data, Route } from '@angular/router';export interface RouteData extends Data {  title?: string;  description?: string;  preload?: boolean;  priority?: 'low' | 'normal' | 'high';  requiresAuth?: boolean;  roles?: string[];  microfrontend?: string;  cache?: boolean;  fallback?: () => Promise<any>;}export interface AppRoute extends Omit<Route, 'data'> {  data?: RouteData;  children?: AppRoute[];}// Utility types para resolversexport interface ProductResolverData {  product: Product;  recommendations: Product[];  reviews: Review[];}export type RouteResolvers<T = any> = {  [K in keyof T]: (route: ActivatedRouteSnapshot) => Observable<T[K]> | Promise<T[K]> | T[K];};

// routes/typed-routes.tsimport { inject } from '@angular/core';import { AppRoute, ProductResolverData, RouteResolvers } from '../types/routing';import { ProductService } from '../services/product.service';const productResolvers: RouteResolvers<ProductResolverData> = {  product: (route) => inject(ProductService).getById(route.params['id']),  recommendations: (route) => inject(ProductService).getRecommendations(route.params['id']),  reviews: (route) => inject(ProductService).getReviews(route.params['id'])};export const productRoutes: AppRoute[] = [  {    path: 'details/:id',    loadComponent: () => import('./product-details.component'),    resolve: productResolvers,    data: {      title: 'Detalles del Producto',      preload: true,      priority: 'high',      cache: true    }  }];

// guards/typed-guards.tsimport { CanActivateFn, CanMatchFn } from '@angular/router';// Guard factory con typesexport function createRoleGuard(roles: string[]): CanActivateFn {  return () => {    const authService = inject(AuthService);    return authService.hasAnyRole(roles);  };}// Guard compuestoexport function createCompositeGuard(  guards: CanActivateFn[]): CanActivateFn {  return (route, state) => {    return guards.every(guard => guard(route, state));  };}// Uso tipadoconst adminGuard = createRoleGuard(['admin', 'super-admin']);const secureGuard = createCompositeGuard([authGuard, adminGuard]);export const adminRoutes: AppRoute[] = [  {    path: 'admin',    canActivate: [secureGuard],    loadChildren: () => import('./admin/admin.routes'),    data: {      requiresAuth: true,      roles: ['admin'],      title: 'Panel Administrativo'    }  }];

// strategies/preload-strategies.tsinterface PreloadStrategy {  shouldPreload(route: Route): boolean;  getDelay(route: Route): number;}class NetworkAwareStrategy implements PreloadStrategy {  shouldPreload(route: Route): boolean {    // @ts-ignore - navigator.connection es experimental    const connection = navigator.connection;        if (connection?.effectiveType === '4g' && route.data?.['priority'] === 'high') {      return true;    }        return route.data?.['preload'] === true && connection?.effectiveType !== 'slow-2g';  }    getDelay(route: Route): number {    // @ts-ignore    const connection = navigator.connection;    return connection?.effectiveType === '4g' ? 500 : 2000;  }}class UserBehaviorStrategy implements PreloadStrategy {  private readonly analytics = inject(AnalyticsService);    shouldPreload(route: Route): boolean {    const path = route.path;    const userProbability = this.analytics.getNavigationProbability(path);    return userProbability > 0.7; // 70% de probabilidad de navegación  }    getDelay(): number {    return 1000;  }}// Implementación de la estrategia compuesta@Injectable()export class SmartPreloadStrategy implements PreloadingStrategy {  private strategies: PreloadStrategy[] = [    new NetworkAwareStrategy(),    new UserBehaviorStrategy()  ];    preload(route: Route, load: () => Observable<any>): Observable<any> {    const shouldPreload = this.strategies.some(strategy =>       strategy.shouldPreload(route)    );        if (!shouldPreload) {      return of(null);    }        const delay = Math.min(      ...this.strategies.map(strategy => strategy.getDelay(route))    );        return timer(delay).pipe(mergeMap(() => load()));  }}

// services/router-state.service.ts@Injectable({  providedIn: 'root'})export class RouterStateService {  private state = new BehaviorSubject<any>({});  private history: string[] = [];    constructor(private router: Router) {    this.router.events.pipe(      filter(event => event instanceof NavigationEnd),      map(event => (event as NavigationEnd).url)    ).subscribe(url => {      this.history.push(url);      // Mantener solo los últimos 10      if (this.history.length > 10) {        this.history.shift();      }    });  }    setState(key: string, value: any): void {    const currentState = this.state.value;    this.state.next({ ...currentState, [key]: value });  }    getState(key: string): any {    return this.state.value[key];  }    canGoBack(): boolean {    return this.history.length > 1;  }    goBack(): void {    if (this.canGoBack()) {      const previousUrl = this.history[this.history.length - 2];      this.router.navigateByUrl(previousUrl);    }  }}// Uso en componentes@Component({  template: `    <button (click)="goBack()" [disabled]="!canGoBack()">      Volver    </button>  `})export class NavigationComponent {  private routerState = inject(RouterStateService);    get canGoBack() {    return this.routerState.canGoBack();  }    goBack() {    this.routerState.goBack();  }}

// services/route-cache.service.ts@Injectable({  providedIn: 'root'})export class RouteCacheService {  private cache = new Map<string, { data: any; timestamp: number; ttl: number }>();    set<T>(key: string, data: T, ttlMinutes: number = 5): void {    this.cache.set(key, {      data,      timestamp: Date.now(),      ttl: ttlMinutes * 60 * 1000    });  }    get<T>(key: string): T | null {    const cached = this.cache.get(key);        if (!cached) {      return null;    }        if (Date.now() - cached.timestamp > cached.ttl) {      this.cache.delete(key);      return null;    }        return cached.data;  }    invalidate(pattern?: string): void {    if (!pattern) {      this.cache.clear();      return;    }        for (const key of this.cache.keys()) {      if (key.includes(pattern)) {        this.cache.delete(key);      }    }  }}// Resolver con cachéexport const cachedProductResolver = (route: ActivatedRouteSnapshot) => {  const cache = inject(RouteCacheService);  const productService = inject(ProductService);  const productId = route.params['id'];  const cacheKey = `product-${productId}`;    // Verifica caché primero  const cached = cache.get(cacheKey);  if (cached) {    return of(cached);  }    // Si no hay caché, busca y almacena  return productService.getById(productId).pipe(    tap(product => cache.set(cacheKey, product, 10)) // Caché por 10 minutos  );};

// services/progressive-enhancement.service.ts@Injectable({  providedIn: 'root'})export class ProgressiveEnhancementService {  private supportsHistory = typeof window !== 'undefined' &&     window.history && window.history.pushState;    enhanceNavigation(): void {    if (!this.supportsHistory) {      return; // Fallback a navegación tradicional    }        // Intercepta clicks en links y convierte a navegación SPA    document.addEventListener('click', (event) => {      const target = event.target as HTMLElement;      const link = target.closest('a[href]') as HTMLAnchorElement;            if (link && this.shouldEnhance(link)) {        event.preventDefault();        inject(Router).navigateByUrl(link.href);      }    });  }    private shouldEnhance(link: HTMLAnchorElement): boolean {    // No enhance links externos    if (link.hostname !== window.location.hostname) {      return false;    }        // No enhance descargas    if (link.download) {      return false;    }        return true;  }}

// ❌ No hagas esto - lazy loading innecesario para apps pequeñasconst routes: Routes = [  {    path: 'simple-page',    loadComponent: () => import('./simple-page.component') // Componente de 2KB  }];// ✅ Haz esto - directo para componentes simplesconst routes: Routes = [  {    path: 'simple-page',    component: SimplePageComponent // Componente ya cargado  }];

// ❌ Evita esto - resolvers que bloquean navegaciónexport const slowResolver = (route: ActivatedRouteSnapshot) => {  const service = inject(SlowService);    // Request lenta que bloquea navegación  return service.getSlowData(route.params['id']).pipe(    delay(5000) // ¡5 segundos de bloqueo!  );};// ✅ Solución - carga asíncrona en el componente@Component({  template: `    <div *ngIf="loading">Cargando...</div>    <div *ngIf="data">{{ data | json }}</div>  `})export class FastComponent implements OnInit {  loading = true;  data: any;    ngOnInit() {    const id = inject(ActivatedRoute).snapshot.params['id'];    inject(SlowService).getSlowData(id).subscribe(data => {      this.data = data;      this.loading = false;    });  }}

// ❌ Evita esto - subscription que gotea memoria@Component({  template: `<div>{{ data$ | async }}</div>`})export class LeakyComponent implements OnInit {  data$!: Observable<any>;    ngOnInit() {    // Subscription que nunca se cancela    this.service.getData().subscribe(data => {      // Procesamiento que puede gotear    });  }}// ✅ Solución - limpieza automática@Component({  template: `<div>{{ data$ | async }}</div>`})export class CleanComponent implements OnDestroy {  private destroy$ = new Subject<void>();  data$!: Observable<any>;    ngOnInit() {    this.data$ = this.service.getData().pipe(      takeUntil(this.destroy$)    );  }    ngOnDestroy() {    this.destroy$.next();    this.destroy$.complete();  }}

// ❌ Overkill para escenarios simplesconst routes: Routes = [  {    path: 'dashboard',    loadChildren: () => import('./dashboard/dashboard.routes') // Overhead innecesario  }];// ✅ Solución simple es mejorconst routes: Routes = [  {    path: 'dashboard',    component: DashboardComponent, // Carga directa    children: [      { path: 'overview', component: OverviewComponent },      { path: 'stats', component: StatsComponent }    ]  }];