ngx-hover-preload

This package exports a PreloadingStrategy, which will preload a lazy-loaded route on mouse over a corresponding router link.

Alternatives

Other preloading strategies:

ngx-quicklink - Preloads the modules associated with all links visible in the viewport. Quicklink does more aggressive preloading compared to ngx-hover-preload, which makes it more network and CPU intensive.
Guess.js - Most advanced preloading strategy, which uses predictive prefetching. At build-time Guess.js compiles a data analytics model and includes it in your production bundle, so that at runtime after each navigation Guess.js prefetches only the modules that are likely to be needed next. Guess.js works particularly well with ngx-hover-preload, because if the prediction was wrong the preloading mechanism gracefully fallbacks to hover.

Example

Example is available here.

Usage

Install the module:

yarn add ngx-hover-preload

Standalone

Configure your app with the correct providers:

bootstrapApplication(AppComponent, {
  providers: [hoverPrefetchProviders, provideRouter(routes, withPreloading(HoverPreloadStrategy))]
});

Make sure you import the HoverPrefetchLinkDirective anywhere you want to enable prefetching.

In case you want to disable prefetching for a particular route specify:

{
  path: 'foo',
  data: {
    preload: false
  }
}

NgModules

Import the HoverPreloadModule in your AppModule and your lazy-loaded modules to ensure the required directives are available:

// ...
import { HoverPreloadModule } from 'ngx-hover-preload';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    HoverPreloadModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Make sure you import the HoverPreloadModule in all lazy-loaded modules in which you want to have this functionality available

Don't forget to set the HoverPreloadStrategy as your preloadStrategy:

// ...
import { HoverPreloadStrategy } from 'ngx-hover-preload';

@NgModule({
  // ...
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: HoverPreloadStrategy })],
})
export class AppModule {} // or AppRoutingModule

License

MIT