Angular allows us to control the way module preloading is handled.

There are 2 strategies provided by @angular/router: PreloadAllModules and NoPreloading. The latter enabled by default, only preloading lazy modules on demand.

We can override this behavior by providing custom preloading strategy: In the example below we preload all included modules if the connection is good.

import { Observable, of } from 'rxjs';

export class CustomPreloading implements PreloadingStrategy {
  public preload(route: Route, load: () => Observable<any>): Observable<any> {
    return preloadingConnection() ? load() : of(null);
  }
}

const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
  preloadingStrategy: CustomPreloading
});

Note that that the example above would not be very efficient for larger apps, as it’ll preload all the modules.

file:app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: ``
})
export class AppComponent {}

file:app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { PreloadingStrategy, Route, Routes, RouterModule } from '@angular/router';
import { Observable, of } from 'rxjs';
import { AppComponent } from './app.component';

function preloadingConnection(): boolean {
  const connection = navigator['connection'];
  if (connection) {
    const effectiveType = connection.effectiveType || '';
    if (connection.saveData || effectiveType.includes('2g')) {
      return false;
    }
  }
  return true;
}

class CustomPreloading implements PreloadingStrategy {
  public preload(route: Route, load: () => Observable<any>): Observable<any> {
    return  preloadingConnection() ? load() : of(null);
  }
}

const routes: Routes = [
  { 
      path: '', 
      redirectTo: 'items', 
      pathMatch: 'full' 
  },
  {
      path: 'items',
      loadChildren: 'app/items/items.module#ItemsModule'
  },
  {
      path: 'item',
      loadChildren: 'app/details/details.module#DetailsModule'
  }
];

const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
  preloadingStrategy: CustomPreloading
});

@NgModule({
  imports: [routing],
  exports: [RouterModule],
  providers: [CustomPreloading]
})
class RoutingModule {}

@NgModule({
  imports: [BrowserModule, RoutingModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

翻译自:https://www.30secondsofcode.org/angular/s/router-custom-preloading

相关链接