Make Angular Routes Lazy Loaded using Angular Migrations

Use automatic migration to make your angular codebase use lazy-loaded routes. Or follow a manual step-by-step migration, if needed.

Lazy loading is a pattern in Angular that allows you to load feature modules on demand, rather than loading the entire application upfront.

It significantly improves the initial load time of an application, especially for large applications, as the browser only downloads the necessary code for the initially requested route. This optimization technique enhances user experience and overall application performance.

You can manually implement lazy loading by configuring routes to use the loadComponent property instead of component, which utilizes dynamic imports to fetch modules when needed.

Angular also provides an automated migration tool that helps convert eagerly loaded routes to lazy-loaded routes. This migration schematic, invoked using ng generate @angular/core:route-lazy-loading, analyzes your routing configuration and transforms it to leverage lazy loading.