Angular Lazy loading

A big complex angular app generally consist of several modules and components which are all bootstrapped to make one functional application. In my previous post i wrote about angular routes and navigation. But what if we don’t want to load all routes at once. When an angular app boots up it loads all of its routes. This might lead to delay in the overall app load up time, additionally it might be logical to separate out independent entities of an application. For eg. The app itself and its dashboard for admin users will be two separate components/routes and it does not make sense to load both components/routes when the app is loaded. Most of the end users who are NOT admin users had to suffer that extra second of delay because dashboard route also loaded. So we can restrict this by lazy loading the dashboard.

Lazy loading is a technique to restrict all angular modules to load at once. Rather lazy loaded modules are loaded on demand.

Let’s look at an example on how we can lazy load a module in angular. Extending the example discussed above lets assume that there is an application which also has a dashboard component/route only for admin users. This dashboard route should not be loaded when app loads and should be loaded only on demand.

Assuming we already have an angular project setup we will create a new module named admin by using following command

ng generate module admin

After which we need to create a component in it. Let’s call it admin component. Create it using following command

ng generate component admin/dashboard

You will now see a new folder named admin which will have another folder named dashboard and a .ts file named admin.module.ts. This is the new admin module that has to be lazy loaded.

In your app.module.ts you will have to create a new Routes variable and define routes for all components. For module to be lazy loaded we will have to use a attribute called loadChild. It takes the path of class which needs to be lazy loaded as its value. Also AppModule is the parent class to AdminModule so it will also have RouterModule.forRoot(routes) in its imports array. See code snippet below

At this point this is how app.module.ts will look like

app.module.ts

Remember NOT to import AdminModule in AppModule. The whole point of this is to not load lazy loaded modules when AppModule loads.

Needless to say that app.component.html will have a button. On click of this button the lazy loaded module i.e. AdminModule will load.

app.component.html

lazyload() function will navigate to admin route which is indeed our lazy loaded module. See below code snippet.

app.component.ts

One last thing left is to configure admin.module.ts i.e. our lazy loaded module. You should create a new Routes variable and define path for dashboard component that we created earlier. Also we should include RouterModule.forChild(routes) in imports array of NgModule. Thing to be noted is that we use .forChild() function here as AdminModule is the child class of AppModule. See code snippet below

admin.module.ts

All setup is complete. Now let’s spin up the local server to see lazy loading in action. Use following angular cli command to spin up the server

ng serve

This will spin up the server on port 4200 if it is not in use. If it is in use you can specify the port number in the command itself as shown below

ng server -p 4201

In this case the server will spin up on port 4201

Now lets go to http://localhost:4200 or http://localhost:4201 depending on which port your server is running.
You will see a button as we discussed earlier. This is from app.component.html

Clicking on this button will load the DashboardComponent which is a part of AdminModule or the lazy loaded module. We can verify this by inspecting the network tab in chrome. as shown in below image.

Inspecting network tab in chrome

On clicking the button, a .js chunk should load up which signifies that AdminModule has been lazy loaded and not during app load up.
Hence we achieve lazy loading which significantly improves the app load up time.