lazy loaded states (ocLazyLoad, future states) en Angular moderno

La carga diferida viene integrada en el router. loadComponent carga un componente standalone, y loadChildren carga un archivo completo de rutas.

Antes · AngularJS

$stateProvider.state('reports', {
  url: '/reports',
  templateUrl: 'reports/reports.html',
  controller: 'ReportsCtrl as vm',
  resolve: {
    deps: function ($ocLazyLoad) {
      return $ocLazyLoad.load('reports/reports.module.js');
    }
  }
});

Después · Angular

export const routes: Routes = [
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/reports.component').then(m => m.ReportsComponent),
  },
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
  },
];

// app.config.ts
provideRouter(routes, withPreloading(PreloadAllModules))

Qué cambia

El bundler divide el código en cada import() dinámico, así que no hay una lista de archivos de script que mantener.
Los servicios que usa solo una sección diferida se pueden declarar en el arreglo providers de su ruta, lo que los limita a esa sección.
withPreloading descarga las rutas diferidas en segundo plano después del primer render.

Consejo de migración. Los módulos que la app vieja cargaba con ocLazyLoad ya marcan sus secciones naturales. Úsalos como primer corte para tus archivos de rutas, y luego revisa que ninguna sección diferida dependa de código registrado por otra.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn