Need help with ngx-quicklink?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mgechev
536 Stars 20 Forks MIT License 121 Commits 4 Opened issues

Description

Quicklink prefetching strategy for the Angular router

Services available

!
?

Need anything else?

Contributors list

No Data

ngx-quicklink

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
    routerLink
    s 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)

Why

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).

Usage

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';

@NgModule({ declarations: [...], imports: [ // ... QuicklinkModule, 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: import(() => './contact/contact.module').then(m => m.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

Debugging

Not getting routes preloaded? Most likely the problem comes from a missing import of the

QuicklinkModule
. The
QuicklinkModule
exports a
LinkDirective
which matches the
[routerLink]
selector. It'll hook into all your router links in the scope of the module and observe their visibility. If you've not imported the
QuicklinkModule
correctly, this directive will be missing and the quicklink preloading strategy will not work.

How to verify Angular has made my links "quicklinks"? Inspect a router link and check if it has

ngx-ql
attribute. If it does not, make sure you import
QuicklinkModule
in the module that defines the compilation context of the template where the router link is. Alternatively, if the
ngx-ql
attribute is there, but the prefetching does not work as expected, please open an issue.

Polyfills

ngx-quicklink
:
  • 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:

Alternatively, see the Intersection Observer polyfill.

FAQ

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.

Contributors

mgechev

wKoza rolaveric thekiba Flyrell Niaro
mgechev wKoza rolaveric thekiba Flyrell Niaro

krzysztof-grzybek

retarsis mehmet-erim pshurygin jlilly
krzysztof-grzybek retarsis mehmet-erim pshurygin jlilly

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.