Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngx-quicklink with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/router/package.json"); // @angular/router is a peer dependency. var ngxQuicklink = require("ngx-quicklink")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-quicklink v0.1.5

Quicklink for Angular


quicklink implementation for Angular. It provides router preloading strategy which automatically downloads the lazy-loaded modules associated with all the visible links on the screen.

How it works

Quicklink attempts to make navigations to subsequent pages load faster. It:

  • Detects routerLinks within the viewport (using Intersection Observer)
  • Waits until the browser is idle (using requestIdleCallback)
  • Checks if the user isn't on a slow connection (using navigator.connection.effectiveType) or has data-saver enabled (using navigator.connection.saveData)
  • Prefetches the lazy loaded modules using Angular's prefetching strategy)


This project aims to be a drop-in solution for sites to prefetch links based on what is in the user's viewport. It also aims to be small (~2KB minified/gzipped).


First you need to install the project:

npm i ngx-quicklink --save

After that import the QuicklinkModule to the AppModule, and use the QuicklinkStrategy as preloadingStrategy in the router's configuration. For example:

// ...
import { QuicklinkModule, QuicklinkStrategy } from 'ngx-quicklink';

  declarations: [...],
  imports: [
    // ...
    RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy }),
  bootstrap: [...]
export class AppModule {}

If you want to add a route in the ignore list so that ngx-quicklink will not preload it use the data property:

export const routes: Routes = [
    path: 'contact',
    loadChildren: './contact/contact.module#ContactModule',
    data: {
      preload: false

Note that to make the module available in lazy-loaded modules as well you need to import it in a shared module and export it. Look at this commit to see how ngx-quicklink is integrated in the angular-realworld-example-app.

For a demo, look at the example directory. To run the project use:

cd ngx-quicklink && npm i && npm run release
cd example && npm i && ng serve



  • Includes a very small fallback for requestIdleCallback
  • Optionally requires IntersectionObserver to be supported (see CanIUse). On older browsers ngx-quicklink preloads all links on the page. If you want to enable the IntersectionObserver behavior on older browsers you can use conditional polyfill loading:
<script src=""></script>

Alternatively, see the Intersection Observer polyfill.


What's the difference between quicklink and ngx-quicklink?

quicklink prefetches the resource pointed by the href attribute of an anchor. This doesn't work for Angular because the value of the href attribute is not a JavaScript bundle but a path defined inside of the routing configuration. ngx-quicklink introduces some additional functionality to make the same strategy work well with Angular.

Should I use Guess.js or ngx-quicklink?

The prefetching behavior of Guess.js would most likely be more accurate compared to ngx-quicklink, which will reduce the overfetching. Guess.js, however, may take a little more effort to setup. In case you don't want to integrate with the analytics of your website ngx-quicklink is the right choice for you.





RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free