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.

Cheers!!

Sangwin Gawande

About me : https://sangw.in