app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {CustomPreloadingStrategyService} from './core/services/custom-preloading-strategy.service';
const routes: Routes = [
{
path: 'quick-links',
data: {preload: true, delay: 20000},
loadChildren: () => import('./modules/quick-links/quick-links.module').then(m => m.QuickLinksModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
scrollPositionRestoration: 'enabled',
preloadingStrategy: CustomPreloadingStrategyService
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
custom-preloading-strategy.service.ts
import { Injectable } from '@angular/core';
import { Observable, of, timer } from 'rxjs';
import { map } from 'rxjs/operators'
import { PreloadingStrategy, Route } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class CustomPreloadingStrategyService implements PreloadingStrategy {
preload(route: Route, loadMe: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
var delay:number=route.data['delay']
console.log('preload called on '+route.path+' delay is '+delay);
return timer(delay).pipe(
map( _ => {
console.log("Loading now "+ route.path);
return loadMe() ;
}));
} else {
console.log('no preload for the path '+ route.path);
return of(null);
}
}
}
Yesss. I found the reason for the slow loading.
custom-preloading-strategy.service.ts
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Observable, of, timer } from 'rxjs';
import { map } from 'rxjs/operators'
import { PreloadingStrategy, Route } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class CustomPreloadingStrategyService implements PreloadingStrategy {
constructor(
@Inject(PLATFORM_ID) private platformId: any
){}
preload(route: Route, loadMe: () => Observable<any>): Observable<any> {
// Add a new check here
if (isPlatformBrowser(this.platformId) && route.data && route.data['preload']) {
var delay:number=route.data['delay']
console.log('preload called on '+route.path+' delay is '+delay);
return timer(delay).pipe(
map( _ => {
console.log("Loading now "+ route.path);
return loadMe() ;
}));
} else {
console.log('no preload for the path '+ route.path);
return of(null);
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.