lazy loading example in angular11
Example 1: how to lazyload angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule)
},
{
path: 'projects',
loadChildren: () => import('./modules/projects/projects.module').then(m => m.ProjectsModule)
},
{ path: '', pathMatch: 'full', redirectTo: 'dashboard' },
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Example 2: angular lazy loading images
mport { Component } from '@angular/core';@Component({ selector: 'image', template: ` <img [defaultImage]="defaultImage" [lazyLoad]="image"> `})class ImageComponent { defaultImage = 'https://www.placecage.com/1000/1000'; image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';}