Skip to content

An Angular preloading strategy for loading routes on link hover

License

Notifications You must be signed in to change notification settings

Danevandy99/ngx-hover-preload-v2

Repository files navigation

ngx-hover-preload-v2

Netlify Status

Npm package version Npm package license Npm downloads total

GitHub latest commit

Based on ngx-hover-preload


This package exports:

  1. PreloadingStrategy, which will preload a lazy-loaded route on mouse over a corresponding router link.
  2. PreloadOnDemandService, which can be used to directly load a module that contains a given route path.

Example

Example code available here

Example running here

Usage

  1. Install the package:
npm install --save ngx-hover-preload-v2
  1. Import the HoverPreloadModule into your AppModule AND your lazy-loaded modules to ensure the link hover directive is available:
// ...
import { HoverPreloadModule } from 'ngx-hover-preload-v2';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    HoverPreloadModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. Set your RouteModule preload strategy to HoverPreloadStrategy:
// ...
import { HoverPreloadStrategy } from 'ngx-hover-preload-v2';

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

License

MIT