Angular - 预加载 Angular 模块

 Angular - 预加载延迟模块

在使用路由延迟加载中，咱们介绍了如何使用模块来拆分应用，在访问到这个模块的时候， Angular 加载这个模块。但这须要一点时间。在用户第一次点击的时候，会有一点延迟。

咱们能够经过预加载路由来修复这个问题。路由能够在用户与其它部分交互的时候，异步加载延迟的模块。这可使用户在访问延迟模块的时候更快地访问。

本文将在上一个示例的基础上，增长预加载的功能。

在上一节中，咱们的根路由定义在 main.routing.ts，咱们在 app.module.ts 中使用了根路由定义。

须要注意的是，Home 组件是提早加载的。咱们将在系统启动以后渲染这个组件。

在 Angular 渲染 Home 组件以后，用户就能够与应用交互了，咱们能够经过简单的配置在后台预加载其它模块。

启用预加载

咱们在 forRoot 函数中，提供一个预加载的策略。

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 { }

 

这个 PreloadAllModules 策略来自 @angular/router，因此咱们还须要导入它。

定制预加载策略

router 包中预约义了两个策略：

• 不预加载 NoPreloading
• 预加载全部模块 PreloadAllModules
  

5 秒以后加载模块

可是，您能够本身定义一个定制的策略。这比您想的要更为简单。例如，您但愿在应用初始化 5 秒以后加载其他的模块。

您须要实现接口 PreloadingStrategy，咱们定义一个 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());
    }
}

 

而后，修改 app.module.ts 使用这个自定义策略。须要注意的是，您还须要在 prodivers 中添加这个类。以实现依赖注入。

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 { }

 

你会看到 在 5 秒钟以后，这个功能模块被自动加载了。

加载指定模块

咱们还能够在路由中定义附加的参数来指定哪些模块进行预加载，咱们使用路由定义中的 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 }
];

 

而后，咱们定义新的加载策略。

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

 

最后，在 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 { }

 

此时，能够看到，模块直接被预加载了。即便您点击连接，也不会再有新的请求发生。

其它资源：

• Preloading Modules - Angular Router

• 使用路由延迟加载 Angular 模块