Lazy Loading in Angular 8

Lazy loading is one of the core new features of angular 8, it relates to the loading of a module or a route only when it is required instead of loading all the modules which makes the working and performance of the site slow. We can understand it in a way how lazy people work, they do work only when it is required, same lazy loading loads a module when it is required and it is tightly bound with routing as it is a routing/module architecture.
 

The main advantage of using lazy loading in a project is when we initially load our page, we majorly decrease the bundle size hence improving user experience to a greater extent.
This feature makes lazy loading to use in a easier way.
We can also use lazy loading in angular 7 , just upgrade the version to 8 and install lazy loading via cli manually.

ng g lib about —-routing --lazy --directory=razroo

This CLI command will automatically add lazy loading module to our lib, in addition, to also modify the route within the about.module.ts which will work as a lazy loaded route

 For using lazy loading we need to change the route in app.routing.ts file

We have to lazy load our module:

We have some keys here:

the path is the route we will navigate to.

`load children` key, this is the standard syntax calling a function to import our module when required.

Also, there are some changes we need to do in our module. routing file 

Thanks to Angular 8, for having such a feature we could implement in an easier way.

References:

https://www.9lessons.info/2019/06/angular-8-lazy-load-routing.html

https://codinglatte.com/posts/angular/lazy-loading-modules-preloading-strategy-in-angular-8/

https://angular.io/