Demo

You can see the real example in this stackblitz

Installation instructions

Install ngx-request-idle from npm:

npm install ngx-request-idle

or

yarn add ngx-request-idle

Add needed package to NgModule imports:

import { RequestIdleModule } from 'ngx-request-idle';

@NgModule({
  ...
  imports: [RequestIdleModule.forRoot(),...]
  ...
})

Content

This package contains a service and a custom preload strategy.

• RequestIdle (service)

  • callback() -> Queues a function to be called during a browser's idle periods.
  • requestAnimationFrame() -> this method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint.

• RequestIdlePreloadAllModules (Preload Strategy)

  • This strategy combines the 2 methods of the requestidle service to ensure a preload without blockages

Usage

requestIdleCallback

import { RequestIdle } from 'ngx-request-idle';
...
export class AppComponent implements OnInit {
  ...
  constructor(private _requestIdle: RequestIdle) { }

  ngOnInit() {
    this._requestIdle.callback(() => { // Whatever you need });
  }
  ...
}

requestAnimationFrame

import { RequestIdle } from 'ngx-request-idle';
...
export class AppComponent implements OnInit {
  ...
  constructor(private _requestIdle: RequestIdle) { }

  ngOnInit() {
    this._requestIdle.requestAnimationFrame(() => { // Whatever you need });
  }
  ...
}

RequestIdlePreloadAllModules

import { RequestIdlePreloadAllModules } from "ngx-request-idle";
...
imports: [
  RouterModule.forRoot(routes, {
    // Custom strategy to improve performance when loading lazy-load modules
    preloadingStrategy: RequestIdlePreloadAllModules
  }),
  ...
]
...