ngx-foresight - 🚀 Demo

foresightjs 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

Usage

!Screenshot

installation

``bash
npm install js.foresight ngx-foresight
npm install -D js.foresight-devtools


or


pnpm add js.foresight js.foresight-devtools ngx-foresight
pnpm add -D js.foresight-devtools
`

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 { ForesightDevtools } 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,
});

ForesightDevtools.initialize({
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



`

`ts
// configure preloading strategy as per routes
provideRouter(routes, withPreloading(ForesightjsStrategy)),
// for older versions
RouterModule.forRoot(routes, { preloadingStrategy: ForesightjsStrategy })
``
This library has been tested with Angular 13, but it may also be compatible with older versions. If you encounter any issues with older versions, please report them.

Inspired by ngx-quicklink