https://github.com/mgechev/ngx-hover-preload
🖱 Preload Angular lazy-loaded routes on mouse over
https://github.com/mgechev/ngx-hover-preload
angular javascript prefetching preloading typescript web-performance
Last synced: 7 months ago
JSON representation
🖱 Preload Angular lazy-loaded routes on mouse over
- Host: GitHub
- URL: https://github.com/mgechev/ngx-hover-preload
- Owner: mgechev
- Created: 2021-01-11T01:45:40.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-27T23:26:31.000Z (11 months ago)
- Last Synced: 2025-04-03T18:12:07.882Z (7 months ago)
- Topics: angular, javascript, prefetching, preloading, typescript, web-performance
- Language: TypeScript
- Homepage:
- Size: 645 KB
- Stars: 175
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-hover-preload - Preload Angular lazy-loaded routes on mouse over. (Third Party Components / Router)
- fucking-awesome-angular - ngx-hover-preload - Preload Angular lazy-loaded routes on mouse over. (Third Party Components / Router)
- trackawesomelist - ngx-hover-preload (⭐168) - Preload Angular lazy-loaded routes on mouse over. (Recently Updated / [Nov 29, 2024](/content/2024/11/29/README.md))
README
[](https://app.circleci.com/pipelines/github/mgechev/ngx-hover-preload)
# 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`](https://github.com/mgechev/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](https://github.com/guess-js/guess) - 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](https://github.com/mgechev/ngx-hover-preload/tree/master/src).
## Usage
Install the module:
```
yarn add ngx-hover-preload
```
### Standalone
Configure your app with the correct providers:
```ts
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:
```ts
{
path: 'foo',
data: {
preload: false
}
}
```
### NgModules
Import the `HoverPreloadModule` in your `AppModule` and your lazy-loaded modules to ensure the required directives are available:
```ts
// ...
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`:
```ts
// ...
import { HoverPreloadStrategy } from 'ngx-hover-preload';
@NgModule({
// ...
imports: [RouterModule.forRoot(routes, { preloadingStrategy: HoverPreloadStrategy })],
})
export class AppModule {} // or AppRoutingModule
```
## License
MIT