🖱 Preload Angular lazy-loaded routes on mouse over
This package exports a PreloadingStrategy
, which will preload a lazy-loaded route on mouse over a corresponding router link.
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.ngx-hover-preload
, because if the prediction was wrong the preloading mechanism gracefully fallbacks to hover.Example is available here.
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
MIT