Angular 8: Explain Lazy Loading in Angular 8?

Technology CommunityCategory: AngularAngular 8: Explain Lazy Loading in Angular 8?
VietMX Staff asked 3 years ago

Lazy loading is one of the most useful concepts of Angular Routing and brings down the size of large files. This is done by lazily loading the files that are required occasionally.

Angular 8 comes up with support for dynamic imports in our router configuration. This means that we use the import statement for lazy loading the module and this will be understood by the IDEs, webpack, etc.

Angular 7:

{path: ‘user’, loadChildren:./users/user.module#UserModule’}

Angular 8:

{path: ‘user’, loadChildren: () => import(./users/user.module’).then(m => m.UserModule)};

New with Angular 8, loadChildren expects a function that uses the dynamic import syntax to import your lazy-loaded module only when it’s needed. As you can see, the dynamic import is promise-based and gives you access to the module, where the module’s class can be called.