Angular Lazy Loading — Simple, but Effective
By default, Angular loads all modules as soon as the web application starts up, whether they are needed or not is irrelevant. As an Angular application grows and more modules and components get added, the size of the compiled bundle (HTML, CSS, and Typescript) generated by Angular increases.
The bundle size gets bigger, and as a direct correlation, the amount of time it takes to load the web application also increases. End-users may not necessarily notice the difference, but, you may want to implement Lazy Loading in your Angular application.
What is Lazy Loading
Instead of loading the whole compiled bundle, which takes time and network resources, lazy loading allows for the Angular web app to be split into multiple smaller, and manageable chunks. These chunks are then only loaded when needed.
Advantages of lazy loading
Fewer network resources loaded: When a user loads the web app, instead of all resources of that application being downloaded, a module/chunk will be downloaded and rendered based on the content being requested. This is also helpful on mobile devices especially when an end-user could be outside of a Wi-Fi hotspot.
A decrease in loading time: According to a study conducted by Google in 2018, if a page loads between 1 to 3 seconds, the probability of a user leaving the website increases to 32%. Lazy loading a webpage reduces bundle size, allowing for a quicker loading time.
Implementing Lazy Loading in Angular
To demonstrate lazy-loading, I created a simple Angular project containing three components: about-us, contact-us, and home. The following steps will demonstrate how to create the components as well as their modules.
Generating the components
Create a component called home. Run this command in your console.
ng g c home
Create a contact-us component as well as its module to be used for routing and lazy loading.
ng g c contact-us
Creating the contact-us module with routing.
ng g m contact-us –-routing
The same thing to be done for the about-us component.
ng g c about-us
ng g m about-us –-routing
The home component will be a runtime loaded component. On the other hand, the two lazily loaded components will be about-us and contact-us.
Now that we have three empty components, let’s add some basic styling and add routes. Thereafter we are going to create a simple nav-bar that allows us to route to different components.
In the src/app/app.component.html file, add the following code :
In the src/app/app.component.scss add the following CSS:
Go back to your browser, and now we have three links that take us to different components. Now, let’s add some routing so that we can see the components that are loaded when the links in the nav-bar are clicked.
In the routes array in src/app/app-routing.module.ts, add the following paths. Don’t forget to import the components.
About-us component
Add the following HTML to src/app/about-us/about-us.component.html
Now add some styling to the component.
Now, we add a route in the about-us module which takes us to the about-us component. Make sure to also import your component.
You should see this as a result if you click on the About link in the nav-bar.
Contact-us component
Add the following HTML and styling to src/app/contact-us/
Now, we add a route in the contact-us module which takes us to the contact-us component. Make sure to also import your component.
Home component
The home component will not be lazy-loaded for demonstration purposes so there is no module for it needed. Add some HTML and styling in src/app/home/
And finally, you should see this if the home component is loaded correctly.
Now, we are not finished yet as these components are not loaded separately when clicked.
Let’s add some lazy loading!
At the beginning of the tutorial, where we added our routes to the various components, we specified a certain component to be showed once a link is clicked. Now instead of loading a component, we are going to be loading a module that contains routes and paths of a specific component.
We are going to use a loadChildren property in the path. This property uses an arrow function which is called to resolve and locate a collection of lazy-loaded routes of a specific component. Let’s update the routes array in the app-routing.module.ts file.
Loading modules with the loadChildren property
Go back to your browser and click on the home component link. Go to the developer tools, click on the Network tab. You can see that the runtime.js, polyfills.js, styles.js, vendor.js, and main.js files are initially loaded. These are code bundles generated by Angular.
Once you click on the About link or the Contact Page link, you will firstly notice that the About component is loaded, but also you will see within the network tab, the About-Us chunk is loaded.
Next, click on the Contact Page link.
Now, clicking on the About link again, will not load any module because the module has already been loaded. Notice how small the size of the chunks are.
In conclusion
Separating an application into modules/chunks is a good way to improve the loading time of an Angular application, as well as to keep the file size of the application low.
If you have any problems with the code above, here is a link to the Github repository which contains the final code.
See other resources
https://ultimatecourses.com/blog/lazy-load-angular-modules
Thanks to DVT and Mr Kennedy Sigauke, developer at DVT for the proofreading.
