Lazy Loading in Angular 8

Posted By : Nikita Agarwal | 25-May-2020

Angular2

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/

Related Tags

cloud computing

Java Virtual Machine

About Author

Nikita Agarwal

Nikita Agarwal is a front-end developer and have a good knowledge of HTML , CSS ,Javascipt and Bootstrap and Angular

More From Oodles

Ready to innovate? Let's get in touch

Attach files

Recaptcha is required.

Request for Proposal

Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.