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 tongx-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