Modules Eager Loading, Preloading and Lazy Loading in Angular
I have created this project to understand how Eager Loading, Preloading and Lazy Loading of modules works in Angular.
Eagerly Loading in Angular means that Modules are loaded as soon as the application loads. By default, Angular uses eager loading to load modules.
Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app.
Lazy loading in Angular is an approach to limit the modules that are loaded to the ones that the user currently needs. This can improve your application’s performance and reduce the initial bundle size.
Examples shown in the Demo
AuthModule : Default Module
AdminModule : Custom Preloading
DashboardModule : Custom Preloading
ProductsModule : Lazy loaded
Go to inspect element and open console/network tab and check the logs for Preloading of the modules
You can modify
app/app-routing.module.ts files as per your requirements and see the effects.
The application will automatically reload if you change any of the source files.
Check the demo out and let me know if it helps you too.