# ngx-quicklink [quicklink](https://github.com/GoogleChromeLabs/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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)) * **Waits until the browser is idle** (using [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/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: ```bash 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: ```ts // ... 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: ```ts 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](https://github.com/mgechev/angular-realworld-example-app-qucklink/commit/33ea101c7d84bb5ca086f107148bbc958659f83f) to see how `ngx-quicklink` is integrated in the [angular-realworld-example-app](https://github.com/gothinkster/angular-realworld-example-app). ## 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](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) * Optionally requires `IntersectionObserver` to be supported (see [CanIUse](https://caniuse.com/#feat=intersectionobserver)). 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: ```html ``` Alternatively, see the [Intersection Observer polyfill](https://github.com/w3c/IntersectionObserver/tree/master/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](https://github.com/guess-js/guess) 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. ## Developing & releasing For a demo: ```shell git clone git@github.com:mgechev/ngx-quicklink cd ngx-quicklink && npm i ng build --project ngx-quicklink ng serve ``` To release first update the package version and after that: ```shell npm run release cd dist/ngx-quicklink npm publish ``` ## Contributors [](https://github.com/mgechev) |[](https://github.com/apps/dependabot) |[](https://github.com/wKoza) |[](https://github.com/rolaveric) |[](https://github.com/thekiba) |[](https://github.com/Flyrell) | :---: |:---: |:---: |:---: |:---: |:---: | [mgechev](https://github.com/mgechev) |[dependabot[bot]](https://github.com/apps/dependabot) |[wKoza](https://github.com/wKoza) |[rolaveric](https://github.com/rolaveric) |[thekiba](https://github.com/thekiba) |[Flyrell](https://github.com/Flyrell) | [](https://github.com/Niaro) |[](https://github.com/krzysztof-grzybek) |[](https://github.com/tarsinzer) |[](https://github.com/mehmet-erim) |[](https://github.com/Timebutt) |[](https://github.com/pshurygin) | :---: |:---: |:---: |:---: |:---: |:---: | [Niaro](https://github.com/Niaro) |[krzysztof-grzybek](https://github.com/krzysztof-grzybek) |[tarsinzer](https://github.com/tarsinzer) |[mehmet-erim](https://github.com/mehmet-erim) |[Timebutt](https://github.com/Timebutt) |[pshurygin](https://github.com/pshurygin) | [](https://github.com/thomashuston) |[](https://github.com/Komock) |[](https://github.com/jlilly) | :---: |:---: |:---: | [thomashuston](https://github.com/thomashuston) |[Komock](https://github.com/Komock) |[jlilly](https://github.com/jlilly) | ## License MIT