Modules Eager Loading, Preloading and Lazy Loading in Angular
https://github.com/sangwin/ng-modules-loading
I have created this project to understand how Eager Loading, Preloading and Lazy Loading of modules works in Angular.
Eagerly Loading
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
Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app.
Lazy Loading
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.
https://github.com/sangwin/ng-modules-loading
Examples shown in the Demo
AuthModule : Default Module
AdminModule : Custom Preloading
DashboardModule : Custom Preloading
ProductsModule : Lazy loaded
Run npm install and then ng serve for a dev server. Navigate to http://localhost:4200/.
Go to inspect element and open console/network tab and check the logs for Preloading of the modules
You can modify app/custom-preloading-strategy.ts and 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.
