Shulou(Shulou.com)06/01 Report--

How to preload delay module by Angular? This problem may be often seen in our daily study or work. I hope you can gain a lot from this question. The following is the reference content that the editor brings to you, let's take a look at it!

In using routing delay loading, we showed how to use the module to split the application, and Angular loads the module when the module is accessed. But it's gonna take a while. There will be a slight delay when the user clicks for the first time.

We can fix this problem by preloading routing. Routing can load delayed modules asynchronously when the user interacts with other parts. This allows users to access the delay module more quickly.

This article will add preloading capabilities on the basis of the previous example.

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

It is important to note that the Home component is loaded in advance. We will render this component after the system starts.

After Angular renders the Home component, users 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 policy comes from @ angular/router, so we also need to import it.

Customized preloading strategy

Two policies are predefined in the router package:

Do not preload NoPreloading

Preload all modules PreloadAllModules

Load the module after 5 seconds

However, you can define a custom policy yourself. It's easier than you think. For example, you want to load the remaining modules 5 seconds after the application is initialized.

You need to implement the interface PreloadingStrategy, and we define a custom policy class for 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): Observable {return Observable.of (true) .delay (5000). FlatMap ((_: boolean) = > fn ());}}

Then, modify the app.module.ts to use this custom policy. It is important to note that you also need to add this class to propers. To implement 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 loaded automatically.

Load specified module

We can also define additional parameters in the route to specify which modules are preloaded, and we use the data in the route definition to provide this additional data.

Import {Routes} from'@ angular/router';// HomeComponent this components will be eager loadedimport {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 {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 on the link, there will be no new requests.

Thank you for reading! After reading the above, do you have a general idea of how Angular implements preloaded delay modules? I hope the content of the article will be helpful to all of you. If you want to know more about the relevant articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.