Angular 13中安装Video.js Rangeslider插件的方法求助

• 我在Angular 13中集成Video.js的Rangeslider插件时遇到了阻碍，该插件的代码逻辑依赖全局的videojs变量，并且会修改其原型。

当前实现方式 #

我在组件中通过ES模块导入的方式引入Video.js：

import videojs from 'video.js';

并在AfterViewInit钩子中初始化播放器：

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

插件导入问题 #

该Rangeslider插件没有官方npm包，我下载了插件源码后作为本地文件导入项目：

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

这直接触发了videojs not found错误——因为此时videojs并非全局变量，且插件加载时播放器还未完成初始化。

无效的尝试方案 #

为了确保videojs初始化完成后再加载插件，我在AfterViewInit的初始化代码之后尝试了以下几种方式，但都没有解决问题：

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

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

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

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

虽然可以通过将videojs和rangeslider文件放在项目根目录，用<script>标签全局引入的方式解决，但这种方案不够优雅，我希望找到更合适的方法。

补充说明
我尝试了@yurzui提供的解决方案：将懒加载函数放在使用videojs的组件文件中（位于导入语句和@Component装饰器之间），但出现了类型错误：

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.

内容的提问来源于stack exchange，提问作者Nelson Teixeira