https://www.notion.so/Preloading-12f7f43c98504b218fd1ecb307b75272
Lazy loading for modules
https://angular.io/guide/lazy-loading-ngmodules#preloading-modules
1
2
3
4
5
6
7
import { PreloadAllModules } from '@angular/router';
RouterModule.forRoot(
appRoutes,
{
preloadingStrategy: PreloadAllModules
}
)
Preloading component data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Resolve } from '@angular/router';
...
/* An interface that represents your data model */
export interface Crisis {
id: number;
name: string;
}
export class CrisisDetailResolverService implements Resolve {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
// your logic goes here
}
}
1
2
3
4
5
6
7
8
import { CrisisDetailResolverService } from './crisis-detail-resolver.service';
{
path: '/your-path',
component: YourComponent,
resolve: {
crisis: CrisisDetailResolverService
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { ActivatedRoute } from '@angular/router';
@Component({ ... })
class YourComponent {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.data
.subscribe(data => {
const crisis: Crisis = data.crisis;
// ...
});
}
}
Preloading Strategies
Available Preloading strategies
- Build-in preloading strategies — NoPreloading (default) or PreloadAllModules.
- Custom preloading strategies — Preload after some time, preload based on network quality, load required modules first, frequently used second, and others lazy load/last.
Preloading all the modules (PreloadAllModules)
Custom preloading strategies
app-routing.module.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {CustomPreloadingStrategyService} from './custom-preloading-strategy.service';
const routes: Routes = [
{path: 'about', data: {preload: true}, loadChildren: () => import('./about/about.module').then(m => m.AboutModule)},
{path: 'users', loadChildren: () => import('./users/users.module').then(m => m.UsersModule)},
{path: '', redirectTo: '', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {preloadingStrategy: CustomPreloadingStrategyService})],
exports: [RouterModule]
})
export class AppRoutingModule {
}
custom-preloading-strategy.service.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {Injectable} from '@angular/core';
import {PreloadingStrategy, Route} from '@angular/router';
import {Observable, of} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CustomPreloadingStrategyService implements PreloadingStrategy {
preload(route: Route, fn: () => Observable<any>): Observable<any> {
if (route.data && route.data.preload) {
return fn(); // Proceeds with preloading
}
return of(null); // Proceeds without preloading
}
}