Lazy Loading

1. What is Lazy Loading?
- 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>