While application development in any technology, It is very necessary for a developer to make the application serve faster at the client end. Because user does not wait to open a page which is slower. There are different ways in different techniques to enhance the performance of the application. If we talk about Angular framework specifically then it also comes with various techniques to enhance the application performance. Lazy loading modules is one of the way which make the Angular app serves faster.
Lazy loading is the process of loading particular features of Angular application only when user navigates to their routes for the first time. This can be very useful for increasing the application performance and decreasing the initial size of the bundle transmitted to the client browser.
To add lazy loading by asynchronously loading the feature module for routing whenever required, we go to the route configuration and use the property loadChildren. Let's have a look on syntax below:
We will load the below-featured module with lazy loading
Angular provides the loadChildren property of a route's path to specify the module that needs to be lazy-loaded when the user first navigated to.
Have a look at the code of the app-routing.module.ts file.
Let's have a look on code inside lazy-routing.module.ts file.
Note: Don't forget to add the routing module in lazy.module.ts file.
Angular has made very simple to add lazy loading module in the application.
You can find other demos at Angular sample application
That’s all for now. Thank you for reading and I hope this post will be very helpful for understanding lazy loading modules in Angular 8.
Let me know your thoughts over the email firstname.lastname@example.org. I would love to hear them and If you like this article, share with your friends.
You can download complete code from here. Download Code