How do I install Video.js's Rangeslider plugin on Angular 13?

Issue

I'm having a hard time trying to install video.js's Rangeslider plugin in Angular 13. The problem is that the rangeslider code expects a global videojs variable to be available and alters it's prototype.

So in this moment videojs is provided by an import in my component:

import videojs from 'video.js';

And I start videojs with this code in AfterViewInit:

this.player = videojs(this.myVideoComponent.nativeElement, this.config, () => {
    console.log('player ready!');
});

Now AFAIK Rangeslider plug in doesn't have a npm package available, so I download it and imported as a normal file within my project:

import RangeSlider from 'src/app/shared/rangeslider-videojs';

This created the error videojs not found, because videojs isn't global and not even initialized;

So to be able to have videojs initialized it has to be in AfterViewInit after the initialization code mentioned above. So I tried all this:

let RangeSlider = require('src/app/shared/rangeslider-videojs');

let RangeSlider = require('src/app/shared/rangeslider-videojs')(videojs, {});

this.player.bind(require('src/app/shared/rangeslider-videojs'));

window['videojs'] = require('src/app/shared/rangeslider-videojs');

With equal results. I CAN put videojs and rangeslider files directly in root dir and use <script> tags to load it the hard way. But that would be so ugly I'm very relutant in doing it.

Anyone knows a way to load rangeslider plugin on an Angular component ?

Edit

I tried @yurzui solution. I put the lazyload function in the same component file I use videojs, but outside the component code, I mean between the imports and @Component. I got the following error:

Property 'videojs' is missing in type 'typeof videojs' but required in type 'typeof import("/vagrant/frontend/node_modules/@types/video.js/index")'.

22  const videoJs: any = (window['videojs'] = (await import('video.js')).default);
                          ~~~~~~~~~~~~~~~~~

  node_modules/@types/video.js/index.d.ts:40:1
    40 export default videojs;
       ~~~~~~~~~~~~~~~~~~~~~~~
    'videojs' is declared here.

Solution

You can assign videosjs default import to global window variable so that it will be visible inside plugin code.

Also, consider an option to lazy load those scripts dynamically. It will solve your issue and reduce the size of main bundle.

async function loadVideoJs() {
  const videoJs = (window['videojs'] = (await import('video.js')).default);
  await import('src/app/shared/rangeslider-videojs');
  return videoJs;
}

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  player: any;

  @ViewChild('myVideoComponent') myVideoComponent: ElementRef;

  async ngAfterViewInit() {
    const videoJS = await loadVideoJs();
    this.player = videoJS(this.myVideoComponent.nativeElement, {}, () => {
      console.log('player ready!');
    });
    this.player.rangeSlider({
      ...
    });
  }
}

You can play with it in this repo https://github.com/alexzuza/angular-cli-videojs

Answered By - yurzui