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

This article focuses on "analyzing the preloaded configuration and lazy loading configuration in Angular". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "analyzing the preloaded configuration and lazy loading configuration in Angular".

NgModule is the core of the Angular module, so let's talk about it first.

1. The function of @ NgModule:

The most fundamental meaning of NgModule is to help developers organize business code. Developers can use NgModule to organize closely related components together, which is the first and foremost.

NgModule is used to control whether components, instructions, pipes, etc., can be used. Components in the same NgModule are visible to each other by default, while external components can only see NgModule exports (exports), that is to say, if your defined NgModule does not exports any content, then external users cannot use any of the defined content even if they import your module.

NgModule is the smallest unit used in packaging. When packaging, all @ NgModule and routing configurations are checked. The underlying Angular is packaged using webpack. Because Angular has already configured webpack for us, it is much easier for developers, otherwise they will need to configure their own environment.

NgModule is the smallest unit that Router can load asynchronously, and the smallest unit that Router can load is modules, not components. Of course, it is allowed to have only one component in the module, as many component libraries do. [recommended for related tutorials: "angular tutorial"]

2. @ NgModule structure description:

@ NgModule ({declarations: [], / / components, directives, and pipes of the current module imports: [], / items that the current template depends on That is, external modules (including httpModule, routing, etc.) export: [], / declare the application to other module to use providers: [], / / inject services into the current module bootstrap: [] / / which component is started by default (only the root module can set the bootstrap attribute)})

3. Lazy loading instructions

(1) the RouterModule object provides two static methods: forRoot () and forChild () to configure routing information.

ForRoot () / / define the main routing information in the main module

ForChild () ``/ / is applied in the feature module (sub-module)

(2) lazy loading: loadChildren

Instead of adding the corresponding module to the AppModule, the Angular is told by the loadChildren attribute to load the corresponding module according to the path configured by the loadChildren attribute. This is the specific application of the lazy loading function of the module. The corresponding module will only be loaded when the user visits the / xxx/** path, which reduces the size of loading resources when the application starts. The attribute value of loadChildren consists of three parts:

Relative path of Module needs to be imported

# delimiter

Export the name of the module class

(3) preloading

In the case of lazy loading, there is sometimes a delay in the response when routing loads a module for the first time. At this point, the preloading strategy can be used to solve this problem.

Angular provides two loading strategies

PreloadAllModules- preloading

NoPreloading- is not preloaded (default).

The second parameter of RouterModule.forRoo () adds configuration options, one of which is the preloadingStrategy configuration, which is a preloaded policy configuration.

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

However, we prefer to control the preloading of the module ourselves, so we need to customize the preloading strategy.

A, Custom-load all modules after 5 seconds

Create a new custom-preloading-strategy.ts file at the same level of the app build

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 ());}}

Inject into the providers of app.modules.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 {CustomPreloadingStrategy} from'. / preload' @ NgModule ({declarations: [AppComponent, HomeComponent], imports: [BrowserModule, RouterModule.forRoot (routes, {preloadingStrategy: CustomPreloadingStrategy})], providers: [CustomPreloadingStrategy], bootstrap: [AppComponent]}) export class AppModule {}

B, Custom-specify module preload

Create a new selective-preloading-strategy.ts file at the same level of the app build (you need to inject providers in app-routing.module.ts, and then the data defined in the route sets whether to preload or not by additional parameters)

Import {Injectable} from'@ angular/core';import {PreloadingStrategy, Route} from'@ angular/router';import {Observable} from 'rxjs/Observable';import' rxjs/add/observable/of';@Injectable () export class SelectivePreloadingStrategy implements PreloadingStrategy {preloadedModules: string [] = []; preload (route: Route, load: () = > Observable): Observable {if (route.data & route.data ['preload']) {return load ();} else {return Observable.of (null) }}}

App-routing.module.ts (this file combines lazy loading with preloading)

Import {NgModule} from'@ angular/core';import {RouterModule, Routes} from'@ angular/router';import {CanDeactivateGuard} from'. / guard/can-deactivate-guard.service';import {SelectivePreloadingStrategy} from'. / selective-preloading-strategy'; / / preload import {PageNotFoundComponent} from'. / not-found.component' Const appRoutes: Routes = [{path:', redirectTo: 'home', pathMatch:' full'}, {path: 'mian', loadChildren:'. / main/mian.module#MainModule'}, / / lazy load (the router configuration file and module file at this level do not need to be introduced into the build) {path: 'home', loadChildren:' / home/home.module#HomeModule', data: {preload: true}} / / lazy loading + preloading {path:'* *', component: PageNotFoundComponent} / / Note to put it to the end] @ NgModule ({imports: [RouterModule.forRoot (appRoutes, {enableTracing: true, / /)

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.