Lazy Loading with Angular 4

This is just a basic step for how to create lazy loading module in Angular. The sample template that I use for this example was build with Angular CLI 1.0.0 and Angular 4.0.0.

Why need lazy loading?

Normally, Angular will load all the components when starting up the application, as you can see in the app.module.ts all components are imported and put them all in the declarations array, this is will tell Angular that ‘Please load all of this components in the declarations array when starting up the application’.

This is will make our application slow when user first visit our site, because we need to download all components at first time but what user can see is only home page (home component). This is why we need lazy loading to improve the performance of loading time of the application.

How Lazy Loading work?

Lazy Loading is load only what we need to use when first starting up the application. If user navigate to a new page, then the component for that page will load immediately. However, this not mean that it load the component all the time we change page. In fact, it load only for the first visit page, it will not load when we revisit that page again.

Let’s start Lazy Loading

  • Create Feature Module and route

We need to create the feature module and child route for each category, this is the way that we can load them separately. let see the GalleryComponent as an example.

gallery.component.ts

In the Gallery module, we do the same as app.module.ts, we need to import all related components to the declarations array and export it. In this example I export is as GalleryModule.

*** Note: if your component need to use some directives like: *ngIf, *ngFor… then you will need to import CommonModule from @angular/core in you module.
  • create child route
gallery.router.ts

In the child route we also need to import all components as well. And you will notice that we use .forChild function to export the router, because this is not the root router of the application.

After we created feature module and child route for each category, now we need to import them to the root router. In this example, I create a root router name it: app.router.ts

app.router.ts

In the app.router.ts you will the special router called loadChildren, this is use for lazy loading module and it accept value as a string. The path of the loadChildren is based on src directory, you need to provide the full path of your feature module and put the ‘#’ sign then your export module class name.

Finally, we need to import the app.router.ts that is root router of the application to the app.module.ts.

app.module.ts
Note: Do not import any components that related to lazy loading module in app.router.ts and app.module.ts, because feature module and child route will handle for this

Let’s run it.

Now we have completed all basic steps for lazy loading. Let’s start the application and see how lazy it is.

simply run ng serve to start the application. Open Chrome Dev Tool by pressing F12, then go to Network tab. When you navigate to a new page, you will see the *.chunk.js will download if that page is never visit before.

You can find my basic template for lazy loading in here. Please comment or give some suggestion if I missed something for this article.