HLS playing in ionic 4 not working

[ShahoG]

Description

Init of m3u8 playlist not working on ionic 4 using angular

Getting:

TypeError: Cannot read property 'elem' of undefined
    at VgFullscreenAPI.push../node_modules/videogular2/compiled/src/core/services/vg-fullscreen-api.js.VgFullscreenAPI.init (vg-fullscreen-api.js:97)
    at VgPlayer.push../node_modules/videogular2/compiled/src/core/vg-player/vg-player.js.VgPlayer.ngAfterContentInit (vg-player.js:37)
    at callProviderLifecycles (core.js:22409)
    at callElementProvidersLifecycles (core.js:22390)
    at callLifecycleHooksChildrenFirst (core.js:22380)
    at checkAndUpdateView (core.js:23311)
    at callViewAction (core.js:23548)
    at execEmbeddedViewsAction (core.js:23511)
    at checkAndUpdateView (core.js:23308)
    at callViewAction (core.js:23548)

When using standard out of the documentation snippet for HLS player

My code:

<vg-player>
          <video #exerciseVideo [vgHls]="exerciseBankVideo" id="exercise-video" type="video/mp4" playsinline
            autoplay controls crossorigin>
          </video>
</vg-player>

Everything is imported correctly including the hls.js. This exact setup works in my angular 7+ project

[ShahoG]

Ok for anyone else struggling with this issue: I managed to solve this by putting the following in the HTML:

<vg-player>
          <vg-controls>
            <vg-play-pause></vg-play-pause>

            <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-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>

            <vg-mute></vg-mute>
            <vg-volume></vg-volume>

            <vg-fullscreen></vg-fullscreen>
          </vg-controls>

          <video #media [vgMedia]="media" [vgHls]="exerciseBankVideo" id="singleVideo" crossorigin>
          </video>
        </vg-player>