🖱 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
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
}
}
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