What is Lazy Loading

What is Lazy Loading

• 1.
  What is LazyLoading? - Eager Loading - Lazy Loading - All angular modules "NgModules" are eagerly loaded. - Modules are loaded along with application. - It makes application heavy on browser. - It makes page rendering slow. - Even you are not using specific module, it is loaded into memory. - Lazy Loading is a design pattern - Lazy loading allows to load NgModules only when they are required. - It keeps initial bundle size smaller - It improves render time. It decreases the page load time. - It is more light weight. Ex: 1. Create a new Application with Routing Enabled - Open your workspace - Create a new Application with routing > ng generate application Amazon --routing 2. Create Modules for your application - Open your "app" folder in terminal - Generate modules with individual route > ng g module vendors --route vendors --module app.module > ng g module customers --route customers --module app.module 3. Every module comprises of following files -customers-routing.module.ts [child routes] -customers.module.ts [child modules registration] -customers.component.ts -customers.component.html -customers.component.css - customers-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { CategoriesComponent } from './categories.component'; const routes: Routes = [{ path: '', component: CategoriesComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class CategoriesRoutingModule { } 4. app-routing.module.ts
• 2.
  import { NgModule} from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'categories', loadChildren: () => import('./categories/categories.module').then(m => m.CategoriesModule)}, { path: 'vendors', loadChildren: () => import('./vendors/vendors.module').then(m => m.VendorsModule) }, { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } 4. Create Navigation from "app.component.html" <h2>Amazon Portal</h2> <div> <button routerLink="">Home</button> <button routerLink="/categories">Categories</button> <button routerLink="/vendors">Vendors</button> <button routerLink="/products">Products</button> </div> <div style="margin-top: 30px;"> <router-outlet></router-outlet> </div>