Keath Milligan

On software development, quality, security and broken racecars

Lazy-loading content with angular-cli

A quick example of creating a lazy-loaded module with angular-cli.

Lazy-loading can dramatically improve the performance of your Angular 2 application by loading content only when the user requests it. This is a simple example of lazy-loading using angular-cli.

April 30, 3017: Updated for latest @angular/cli.

You will need a recent version of node/npm and the angular-cli tool installed globally. See https://cli.angular.io/.

Create the App

Create the application scaffolding with:

Create a “home” component that will be the default (not lazy-loaded) route:

Add the Lazy-Loaded Content

Add the module to be lazy-loaded with:

Add a component to be used as the router outlet for the lazy-loaded pages:

Adding the --flat option here is a matter of structural preference. I like to put the “container” component source with the module declaration so it mirrors the main app module’s structure, but you can opt to place it in a subdirectory if you like.

Finally, add a lazy-loaded “page” component to the lazy module:

Edit the src/app/lazy/lazy-routing.module.ts file and add the routes to be lazy-loaded:

Edit the src/app/lazy/lazy.component.html file and add the router outlet:

Update Application Routing

Edit the file src/app/app-routing.module.ts and add the default home page and lazy-loaded routes:

Add some navigation to src/app/app.component.html:

Test

Compile the app and start the angular-cli server with:

In Chrome, open the developer tools window and select the “Network” tab so you can see all of the HTTP requests being made.

Now navigate to http://localhost:4200. You see the default home page and the navigation links.

Note the requests that were made to load the app in the debugger:

Now click the “Lazy Page” link. You should see the “lazy page works” message:

In the debugger, note that an additional request was made to load “0.chunk.js” to render the lazy-loaded page:

Source

Source code on Github.

 

6 Comments

  1. With Angular CLI changing constantly, this will be a solid “getting-started” resource for the beta increments most of this year. Thank you!
  2. Doesn’t work with latest @angular/cli
  3. Beware that when you use lazy loading, you may end up with multiple instances of your services, which may not be what you intend. This video goes into detail on two strategies for solving this problem:
    https://youtu.be/8VLYjt81-fE

    Also, if you are like me and had to do some refactoring to solve for the multiple singletons issue and are wondering why your routerLink elements aren’t working anymore, make sure you’ve imported RouterModule into whatever module has your components using routerLink.

  4. This is very interesting, You’re a very skilled blogger.

    I’ve joined your feed and look ahead to in the hunt for extra of your fantastic
    post. Also, I have shared your website in my social networks

  5. How to enable lazy loading for an existing Angular-cli project? It would great help if you could clarify that.
    • You don’t really need to do anything special to enable it. Check out the github. The key is to put the content you want to lazy load into its own module (see src/app/lazy) and then use “loadChildren” in the router config to load it (see app-routing.module.ts).

Leave a Reply

Your email address will not be published.

*

© 2017 Keath Milligan

Theme by Anders NorenUp ↑