Include hls.js library in an Angular application

Question

I'm trying to include Videogular2 module to my Angular application and I keep getting an error with hls.js. I have followed the Getting started guide but I'm receiving this error in the developer console :

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)

I've executed this command first

yarn add videogular2 dashjs hls.js

I've added scripts path in .angular-cli.json

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

Imports needed modules in app.module.ts

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

Added the HTML file (using a component), where movie is a property of the component.

<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>

Any idea where to look at to resolve this issue?

Thank you

EDIT

I also use jQuery and OwlCarousel2 library.

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

The entire library seems to be written natively in typescript. Why not just use uncompiled typescript like you would any other angular component/module? https://github.com/videogular/videogular2/blob/master/src/streaming/vg-hls/vg-hls.ts — diopside, Aug 23 '17 at 14:42
I think the issue is not coming from Videogular2 library. Here the issue is that Videogular somehow can't found `hls.js` library and I don't know why. What the point of using the uncompiled version? — Ismael, Aug 23 '17 at 14:59
I understand what you mean, but if I want to use `HLS` or/and `Dash` stream I need to import `hls.js` or/and `dashjs` - https://videogular.github.io/videogular2/modules/streaming/vg-hls/ - And I want to play a HLS stream — Ismael, Aug 23 '17 at 16:42

score 2 · Answer 1 · answered Feb 01 '19 at 02:04

2

You only need to add the following line in your component.ts file:

declare var Hls;

after the import clauses and before the @Component decorator.

answered Feb 01 '19 at 02:04

Giuseppe

404
11
20

Include hls.js library in an Angular application

1 Answers1