mgechev / ngx-hover-preload

🖱 Preload Angular lazy-loaded routes on mouse over

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

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