Angular 8 feature | Using loadChildren to Lazy-Load your Module | Angular 8 dynamic EcmaScript imports

Lazy loading is the beautiful feature which Angular provides. We can load the modules only when the user navigates to their routes for the
first time. It will increase the application performance and also will reduce the initial bundle size.
The Angular Router has always supported lazy loading but now in Angular 8, we can dynamically import the lazy-loaded module only when it is needed.
It is promise based and gives you access to the module whenever the module is called.

Let's create a transaction module for demonstrating the angular 8 dynamic EcmaScript imports:

This will create a transaction list, detail and create components.

Now let's create a routing module for transactions at location: app/transactions/tranactions.routing.ts

Now let's create a module for transactions at location: app/transactions/transactions.module.ts

Now let's create an app routing module at location: app/app.routing.ts

Here in the above example, you can see, I'm lazy loading transactions module by using dynamic import syntax. This module will be loaded when a user navigates to transactions route.

Click here to download the complete example

Share This:

Leave a Reply

Your email address will not be published. Required fields are marked *