![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](https://image.slidesharecdn.com/newmicrosoftworddocument-200803093840/85/What-is-Lazy-Loading-1-320.jpg)
![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>](https://image.slidesharecdn.com/newmicrosoftworddocument-200803093840/85/What-is-Lazy-Loading-2-320.jpg)
What is 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>