How to use Angular preload delay module

This time I will show you how to use the Angular preload delay module, what are the precautions when using the Angular preload delay module, the following is a practical case, let's take a look.

In using route lazy loading, we introduced how to use modules to split applications. When accessing this module, Angular loads this module. But it takes a little time. There will be a slight delay when the user clicks for the first time.

We can fix this by preloading routes. Routers can load deferred modules asynchronously while the user interacts with other parts. This gives users faster access to delayed modules.

This article will add the preloading function based on the previous example.

In the previous section, our root routing definition was in main.routing.ts, and we used the root routing definition in app.module.ts.

It should be noted that the Home component is loaded in advance. We will render this component after the system boots.

After Angular renders the Home component, the user can interact with the application, and we can preload other modules in the background through simple configuration.

Enable preloading

We provide a preloaded strategy in the forRoot function.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadAllModules } from '@angular/router';
@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

This PreloadAllModules strategy comes from @angular/router, so we need to import it as well.

Customized preloading strategy

Two strategies are predefined in the router package:

1. No preloading NoPreloading

Preload all modules PreloadAllModules

Load module after 5 seconds

However, you can define a custom policy yourself. It's simpler than you think. For example, you want to load the remaining modules 5 seconds after your app initializes.

You need to implement the interface PreloadingStrategy, and we define a custom strategy class of CustomPreloadingStrategy.

import { Route } from '@angular/router';
import { PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs/Rx';
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
    return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
  }
}

Then, modify app.module.ts to use this custom policy. Note that you also need to add this class in propers. To achieve

dependency injection.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { CustomPreloadingStrategy } from './preload';
@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
 ],
 providers: [CustomPreloadingStrategy ],
 bootstrap: [AppComponent]
})
export class AppModule { }

You will see that after 5 seconds, this function module is

automatically loaded.

Load the specified module

We can also define additional parameters in the route to specify which modules to preload. We use data in the route definition to provide this additional data.

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule', data: {preload: true} },
  { path: '**', component: HomeComponent }
];

Then, we define a new loading strategy.

import { Observable } from 'rxjs/Rx';
import { PreloadingStrategy, Route } from '@angular/router';
export class PreloadSelectedModules implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : Observable.of(null);
  }
}

Finally, use this strategy in app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadSelectedModules } from './preload.module';
@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadSelectedModules })
 ],
 providers: [PreloadSelectedModules ],
 bootstrap: [AppComponent]
})
export class AppModule { }

At this point, you can see that the module is preloaded directly. Even if you click the link, no new request will occur.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

js implements a simple 24-hour clock

ReactJS operation form selection

The above is the detailed content of How to use Angular preload delay module. For more information, please follow other related articles on the PHP Chinese website!