在 Angular 应用程序中包含 hls.js 库

Question

我试图将 Videogular2 模块包含到我的 Angular 应用程序中，但我不断收到hls.js. 我已按照Getting started指南进行操作，但在开发人员控制台中收到此错误：

ERROR ReferenceError: Hls is not defined
    at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.createPlayer (vg-hls.js:56)
    at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.ngOnChanges (vg-hls.js:45)
    at checkAndUpdateDirectiveInline (core.es5.js:10840)
    at checkAndUpdateNodeInline (core.es5.js:12339)
    at checkAndUpdateNode (core.es5.js:12278)
    at debugCheckAndUpdateNode (core.es5.js:13139)
    at debugCheckDirectivesFn (core.es5.js:13080)
    at Object.eval [as updateDirectives] (WatchComponent.html:22)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
    at checkAndUpdateView (core.es5.js:12245)

我先执行了这个命令

yarn add videogular2 dashjs hls.js

我已经添加了脚本路径.angular-cli.json

"scripts": [
    "../node_modules/dashjs/dist/dash.all.min.js",
    "../node_modules/hls.js/dist/hls.min.js"
]

导入所需的模块app.module.ts

imports: [
    BrowserModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    VgStreamingModule
]

添加了 HTML 文件（使用组件），其中movie是组件的属性。

<vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>
    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>
        <vg-scrub-bar></vg-scrub-bar>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video [vgDash]="movie?.asset" [vgHls]="movie?.asset"></video>
</vg-player>

知道在哪里可以解决这个问题吗？

谢谢

编辑

我也使用jQuery和OwlCarousel2图书馆。

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/owl.carousel/dist/owl.carousel.min.js",
    ...
]

Answer 1

您只需在 component.ts 文件中添加以下行：

declare var Hls;

在import子句之后和@Component装饰器之前。