https://github.com/akshykhade/ngx-foresight

foresightjs implementation for Angular
https://github.com/akshykhade/ngx-foresight

angular keyboard-tracking mouse-tracking performance prefetching speed

Last synced: 4 months ago
JSON representation

foresightjs implementation for Angular

• Host: GitHub
• URL: https://github.com/akshykhade/ngx-foresight
• Owner: akshykhade
• Created: 2025-07-04T14:43:42.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2025-07-04T14:58:29.000Z (4 months ago)
• Last Synced: 2025-07-04T16:09:57.493Z (4 months ago)
• Topics: angular, keyboard-tracking, mouse-tracking, performance, prefetching, speed
• Language: HTML
• Homepage: https://www.npmjs.com/package/ngx-foresight
• Size: 1.6 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• fucking-awesome-angular - ngx-foresight - An Angular integration of 🌎 [ForesightJS](foresightjs.com/) that offers a router preloading strategy by intelligently preloading lazy-loaded modules based on user intent predictions derived from mouse and keyboard interactions. (Third Party Components / Router)
• awesome-angular - ngx-foresight - An Angular integration of [ForesightJS](https://foresightjs.com/) that offers a router preloading strategy by intelligently preloading lazy-loaded modules based on user intent predictions derived from mouse and keyboard interactions. (Third Party Components / Router)

README

          


  








  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



# ngx-foresight - [🚀 Demo](https://akshykhade.github.io/ngx-foresight/)

[foresightjs](https://foresightjs.com/) implementation for Angular. It provides router preloading strategy which automatically downloads the lazy-loaded module based on foresightjs prediction of user intent from mouse and keyboard.

[🚀 Demo](https://akshykhade.github.io/ngx-foresight/)

## Usage

![Screenshot](public/example.gif)

## installation

```bash

npm install js.foresight js.foresight-devtools ngx-foresight

# or

pnpm install js.foresight js.foresight-devtools ngx-foresight

```

After that import the `ForesightjsDirective` to the components with `href` and `routerLink`, and use the `ForesightjsStrategy` as `preloadingStrategy` in the router's configuration. For example:

```ts

import { ForesightManager } from 'js.foresight';

import { ForesightDebugger } from 'js.foresight-devtools';

import { ForesightjsDirective } from 'ngx-foresight';

ForesightManager.initialize({

  enableMousePrediction: true,

  positionHistorySize: 8,

  trajectoryPredictionTime: 80,

  defaultHitSlop: 10,

  enableTabPrediction: true,

  tabOffset: 3,

  enableScrollPrediction: true,

  scrollMargin: 150,

});

ForesightDebugger.initialize(ForesightManager.instance, {

  showDebugger: true,

  isControlPanelDefaultMinimized: true, // optional setting which allows you to minimize the control panel on default

  showNameTags: true, // optional setting which shows the name of the element

  sortElementList: 'visibility', // optional setting for how the elements in the control panel are sorted

});

```

```html



  Feature 1

  Feature 2

  Feature 3



```


```ts

// configure preloading strategy as per routes

    provideRouter(routes, withPreloading(ForesightjsStrategy)),

```

Inspired by ngx-quicklink - [ngx-quicklink](https://github.com/mgechev/ngx-quicklink)