Lazy Loading in Angular

Share

Lazy Loading in Angular (2+) is a feature to improve the initial loading time of an application by loading the components on demand.

Angular provides an inbuilt mechanism for Lazy Loading via its Router. This technique is helpful for an application with more number of pages or complex routes. A user may not visit all the pages in an application every time he/she logs in. Implementing Lazy Loading reduces the initial network load by loading the resources of only those required to start the application thereby, improving the starting time immensely.

For adding Lazy Loading in the application, you need to consider few points.
1. Create feature modules to accommodate components and services with similar behavior
Instead of using single AppModule, use sub-modules for each feature.
2. Create separate routing module for feature module
Instead of declaring routes to AppModule, declare it in feature module and import it as forChild function.
3. Do not import feature modules in AppModule
Instead of importing feature module to AppModule, define that in Routes.

Let us create one

Consider an application that consists of Dashboard and Employee Management screens. In this case, you can split up the code into different parts and load each screen whenever it is needed by the application instead of loading both the screens at once. For that, you need to create two feature modules, Dashboard and Employee, where Dashboard module consists of files used in the respective views and Employee module consists of files used in the employee views. The aim is to load these modules independently when the user navigates to the corresponding screens.
Let us see how this can be achieved.

  • Create an Angular application using AngularCLI (ng new lazy-loading-demo)

This will create an Angular application with app.module and app.component.

  • Create feature modules for Lazy Loading

Create two modules using AngularCLI for setting up Lazy Loading.
ng generate module dashboard: This will create dashboard.module file. ng
generate module employee: This will create employee.module file.

  • Create sub-components for employee and dashboard modules

Make sure child components are declared into respective modules and not in app.module.

  • Define routes in app.module.ts

Import RouterModules and define routes for dashboard and employee using loadChildern as shown below. Do not import DashboardModule and EmployeeModule in import array.

  • Define child routes in dashboard and employee feature modules

Instead of defining routes in AppModule, define child routes in corresponding feature module. This method of defining routes helps to modularize the code and implement Lazy Loading.

  • Replace app.component.html

Finally, you can replace default app.component template with a header session which can be used for page navigation in the application and a router-outlet for loading child components. Now, you can run the application using ng serve command.

Verify Lazy Loading


Open chrome browser and run the demo application. Open network in chrome developer tools and navigate to Employee feature module by clicking Employee link in the top right corner. Click on this and then verify that employee.module.chunk.js is added to network list in developer tool.


Once employe.module.chunk.js is loaded in the network it will not load again even if you revisit the employee page. This applies to both feature modules dashboard and employee. By implementing Lazy Loading in this app you are dividing a single bundle into three different parts – main.bundle.js, dashboard.module.chunk.js and employee.module.chunk.js. This helps the browser to load them separately instead of loading it as a single file with large file size.

Implications

When you decide upon the Lazy Loading approach, you need to split AppModules to multiple feature modules. Do not share services and components of one feature module with another feature module. If there is something that you need to share between two feature modules then consider declaring those shared items in AppModule or introduce shared module for those items.
You can refer my demo app here to get a better understanding of Azure Service Fabric.
Happy Coding!
By:
Antajo Paulson
Senior Software Engineer

Please Share Your Thoughts & Comments Below.

How can we help you?