Angular 2 – Lazy Loading

Hi Friends,

Hope you are all well. I haven’t posted for about 10 days now, due to an illness. Anyway, now I am back and today in this post let’s talk about Lazy Loading.

First of all, what is it? What is Lazy Loading and why should we use it in our apps ?

Lazy loading is not a concept, its a feature of angular 2. The modules in  your app could be loaded on demand or when necessary thereby saving or rather decreasing the startup time of your application. This is lazy loading in simple terms. As the name suggests, the modules are loaded lazily when the are needed.

Let’s see it in action now.

A video screencast of this post.

 

The complete code for this post is available here.

Let’s take a simple app scaffolded out using the angular-cli. (I don’t think scaffolded is an actual word., but I am going with it anyway)

Create a component in this app using the below command.

Now create a file called app.routing.ts and add the below code.

As you can see the above code is simply to load our first component in our app when it loads.

Now let’s go ahead and create a new module.

Create a folder with your module name and create a module file, a routing and a component file in it as shown below.

dirstruct

Now open up extra.component.ts and add the below code.

open up extra.routing.ts and add the below code.

Note that I am using RouterModule.forChild since this is a feature module and not a root module.

Open up extra.module.ts and add the below code.

Now we have a complete module. This is a separate module, so ensure that you are doing all this outside the app directory.

Now open up app.routing.ts file again and add the below line of code.

Here we are using the loadChildren property instead of component. This will get the required ngModuleFactory and load it when it is needed instead of loading all the components during startup time.

Now open up app.component.html file and add the below code to get the app started.

This will give us two links with the routerLink denoting the path.

Open up app.module.ts and add our routing file in that as shown below.

Alright, now let’s run the app. Once it fires up on the browser (The first component will be triggered) open up inspect and click on sources tab. In the left hand side you will notice all the files that are loaded.

loadedfiles

Now click on the extra (module to be lazily loaded).

lazyloaded

You will notice a new file called 0.chunk.js. So you can see that thought all the files are compiled and chunks are available, it loads only when it is needed. This is Lazy Loading.

Please watch the video once for a better understanding. Hope this helped you guys. Share it with someone and help them too.

Thanks for reading. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • rotatopoti

    nice. you put a lot of work into it and it makes it clear

  • Lenin J

    @youtube : Hey Dude, great tutorial. Taught very well. Precise and perfect. Thank for the tutorial.
    ‘ve one suggestion-Can you reduce the speed of teaching. coz unable to listen for a while even.
    That’s the thing I suggest you buddy. Otherwise its cool…

    Can you make a tutorial of angular universal?