What is the Lazy-loading in Angular and Different between Old syntax and New Syntax of Lazy-loading with examples

Hey Guys,

In this blog we are going to learn about How we can use Lazy-loading in angular with examples. We are also going to learn the different syntax of lazy loading in angular.

• Lazy loading is used to load the specified module once the routes match.
• It will load the modules once use access that particular section or modules in our application.
• Using lazy loading will improve the performance of our application and also decrease the load time of our application.
• Using lazy-loading will help to reduce the bundle size of the application.

Lazy -loading Old syntax in angular 7 or lower version

         {

               path: "feature",

               loadChildren:'./feature-module/feature-module.module#FeatureModuleModule'
         },

Lazy -loading new syntax in angular 8+

  {

    path:'feature',

    loadChildren:() =>  import('./feature-module/feature-module.module').then(m => m.FeatureModuleModule)

  }

For example,

Let's say we create a module using the below command.

• ng g module feature-module --routing=true

Once your module generates let's create some components inside feature-modules like feature1, feature2, and feature3.

After creating the above structure you're setup looks like below.

Now either you can create one new file like the app-module-routing.ts file OR you can use the app.module.ts file for setting up lazy loading functionality. 

For example

feature-module-routing.module.ts

Output of the feature modules in browser:

If you guys have any query then you can drop a mail to us on this mail id:

techoswag@gmail.com