Lazy loading allows modules to be loaded on demand instead of all at once on initial load to improve performance. It is implemented using loadChildren and routing modules. PreloadingStrategy can be used to preload routes. Resolve allows fetching data before navigating to a route by implementing the Resolve interface and adding it to routes. This improves the user experience by having data ready when the component loads.

1. ANGULAR LAZY
LOADING AND
RESOLVE
Akhil K • 15.03.2019

2. Lazy Loading
● Don’t load something which you don’t
need.
● Reducing the size of bundle when the
app loads initially improves the app
loads times thus improving user
experience.

3. const oneRoutes: Routes = [
{
path: '',
component: OneComponent,
}
];
@NgModule({
imports: [
RouterModule.forChild(oneRoutes),
],
exports: [
RouterModule,
],
providers: [],
})
export class OneRoutingModule { }
Create Routing
Module

4. Use loadChildren
const appRoutes: Routes = [
{
path: 'one',
loadChildren: './one/one.module#OneModule'
}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes),
],
exports: [
RouterModule,
],
providers: [],
})
export class AppRoutingModule { }

5. import { RouterModule, Routes,
PreloadAllModules } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, {
preloadingStrategy: PreloadAllModules,
}),
],
exports: [
RouterModule,
],
providers: [],
})
export class AppRoutingModule { }
PreloadAllModules

6. Angular Resolve
● Allows your application to fetch data
before navigation to the route.
● There is no point in rendering the
view or loading this component
before the data is available.

7. import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
@Injectable()
export class Resolver implements Resolve<any>
{
constructor() {}
resolve() {
localStorage.setItem('userName', 'test');
}
}
Create Resolver

8. Add Resolve
Guard to Route
import { Resolver } from
'../resolver/resolver.service';
const appRoutes: Routes = [
{
path: '',
resolve: { resover1: Resolver },
component: OneComponent,
}
];
@NgModule({
providers: [
Resolver
],
})
export class AppRoutingModule { }

9. Queries ?

10. Thanks