Angular is a prominent development framework for single-page web application development. Initially, designed for JavaScript, Angular 4 also supports languages like Dart and Typescript. Angular is a platform loved by millions of users due to its productivity and scalable infrastructure. Using Angular, you can build features quickly with simple, declarative templates. Angular is developed with primary focus on mobile. So, developers need to put a tremendous effort in making Lazy Loading as easy as possible. With Lazy Loading, the initially loaded application will look small. In this post, you will learn why we need Lazy Loading in Angular 4 and the quick and easy steps to create that.

Why do we need Lazy Loading in Angular 4?

Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.

Usually, Angular will load all components while starting the application (page). As you can see, all the declarations and imports are in app.module.ts file. This file will load all imported components and injected providers during the first page load.