Eager, Lazy and Preloading modules in Angular

In the previous posts we have seen about Feature modules which are added to the root module for better modularity and maintainability of the Angular applications. Depending on the need there are 3 different ways in which modules can be loaded in an Angular application.

Eager loading
Laze loading &
Preloading

Eager loading in the default type of loading which is suitable for smaller applications where all the dependent modules are loaded initially when the application is loaded in the browser. With eager loading the initial loading of the application might take a bit more time, but loading of successive modules on route invocation will be fast since all the dependent modules are already loaded in the browser memory.

Lazy loading is suitable for medium to larger applications where the number of dependent modules are more and loading all of them during the initial load is not feasible. In lazy loading each route is mapped to a module, but the module is not loaded till the route is invoked. Initial loading of the application will be quick since only the root module gets loaded when the application loads in the browser.

Lazy loading is also suited for applications which have role based authentication where all the users will not have access to all the modules, based on the user access routes will be protected and only the required modules will be get loaded when the user accesses a valid route.

Preloading is somewhere in between eager loading and lazy loading, initially only the root module gets loaded. Once the root module is loaded we pre-load the next module which is most likely be accessed by the user. This requires some knowledge about the application and the users, since we pre-load the modules based on the assumption that the user is most like to access this module in the successive clicks.