What is Lazy Loading in Angular with appropriate syntax?

DWQA QuestionsCategory: QuestionsWhat is Lazy Loading in Angular with appropriate syntax?
Editor Staff asked 1 month ago

What is Lazy Loading in Angular with appropriate syntax?

1 Answers
Editor Staff answered 1 month ago

Lazy loading is a feature of Angular which helps in bringing down the size of large files. This is accomplished by lazily loading the files that are to be used again and again.
Angular 8 provides support for dynamic imports in our router configuration. In other words, we use the import statement for lazy loading of the module and this will be understood by the webpack, IDEs (Integrated Development Environments), etc.
Syntax

{path: 'user', loadChildren: () =>
import('./users/user.module').then(my => my.UserModule)};

Explanation
In the above code snippet, the loadChildren expects a function that uses the dynamic import syntax to import the lazy loaded module only when it is needed. As is evident from the above code snippet, the dynamic import is based on promises and gives us access to the module, where the module’s class can be called.