Angular Lazy Loading Feature Modules

Angular Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. This can add some initial performance during the initial load, especially if you have many components with complex routing. There are some good posts about lazy loading in angular, but I wanted to simplify it further.

There are three main steps to setting up a lazy loaded feature module:

• Create the feature module.
• Create the feature module’s routing module.
• Configure the routes.

Set up an app

If you don’t already have an app, you can follow the steps below to create one with the CLI. If you do already have an app, skip to Configure the routes. Enter the following command where customer-app is the name of your app:

ng new customer-app –routing

This creates an app called customer-app and the –routing flag generates a file called app-routing.module.ts, which is one of the files you need for setting up lazy loading for your feature module. Navigate into the project by issuing the command cd customer-app.

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page