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: 5 days 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 (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-11-27T23:26:31.000Z (about 2 months ago)
• Last Synced: 2025-01-13T12:16:19.300Z (13 days ago)
• Topics: angular, javascript, prefetching, preloading, typescript, web-performance
• Language: TypeScript
• Homepage:
• Size: 645 KB
• Stars: 171
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-angular - ngx-hover-preload - Preload Angular lazy-loaded routes on mouse over. (Table of contents / Third Party Components)
• awesome-angular - ngx-hover-preload - Preload Angular lazy-loaded routes on mouse over. (Table of contents / Third Party Components)
• 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

        
[![mgechev](https://circleci.com/gh/mgechev/ngx-hover-preload.svg?style=svg)](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