VgDash on Videogular2 problem with implementation (DASH Media on Angular2) ERROR MediaPlayer not initialized

I'm working on a new project where I want to implement the Videogular2 player. The video files are DASH (.mpd) files. So according to the documentation, I am trying to implement the VgDASH module, but I have a problem to run it all. I am very beginner and I would ask for help.

Here is official sample using dash module: https://github.com/videogular/videogular2-showroom/tree/master/src/app/streaming-player

Based on it, I wrote my application. When I run the code, I get the following errors in the console in a Chrome browser:

PlayerComponent.html:61 ERROR TypeError:

 this.dash.getDebug(...).setLogToBrowserConsole is not a function
    at VgDASH.push../node_modules/videogular2/compiled/src/streaming/vg-dash/vg-dash.js.VgDASH.createPlayer (vg-dash.js:63)
    at VgDASH.push../node_modules/videogular2/compiled/src/streaming/vg-dash/vg-dash.js.VgDASH.ngOnChanges (vg-dash.js:37)
    at checkAndUpdateDirectiveInline (core.js:31906)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
    at Object.eval [as updateDirectives] (PlayerComponent.html:61)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)

and

core.js:6014 ERROR MediaPlayer not initialized!

Here's my component (no errors underline in code using Visual Studio Code):

player.component.html

  <vg-player (onPlayerReady)="onPlayerReady($event)">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <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-quality-selector *ngIf="bitrates"
                             (onBitrateChange)="setBitrate($event)"
                             [bitrates]="bitrates">
        </vg-quality-selector>

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

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

    <video #media 
            #vgDash="vgDash"
           [vgMedia]="media"
           [vgDash]="currentStream.source"
           id="singleVideo"
           crossorigin>
    </video>
</vg-player>

<label>
    Media Url: <input type="text" [(ngModel)]="currentStream.source">
</label>

player.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {BitrateOption, VgAPI} from 'videogular2/compiled/core';
import { TimerObservable } from 'rxjs/observable/TimerObservable';
import { Subscription } from 'rxjs';
import { IDRMLicenseServer } from 'videogular2/compiled/streaming';
import { VgDASH } from 'videogular2/compiled/src/streaming/vg-dash/vg-dash';

export interface IMediaStream {
  type: 'vod' | 'dash';
  source: string;
  label: string;
  token?: string;
  licenseServers?: IDRMLicenseServer;
}

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.scss']
})
export class PlayerComponent implements OnInit {
  @ViewChild(VgDASH, {static: false}) vgDash: VgDASH;

  currentStream: IMediaStream;
  api: VgAPI;

  bitrates: BitrateOption[];

  streams: IMediaStream[] = [
    {
      type: 'dash',
      label: 'DASH: Media Stream test',
      source: 'http://livesim.dashif.org/livesim/testpic_2s/Manifest.mpd'
    }
  ];

  constructor() { }

  onPlayerReady(api: VgAPI){
    this.api = api;
  }

  ngOnInit() {
    this.currentStream = this.streams[0];
  }

  setBitrate(option: BitrateOption) {
    switch (this.currentStream.type) {
        case 'dash':
            this.vgDash.setBitrate(option);
            break;
    }
  }


  onClickStream(stream: IMediaStream) {
    this.api.pause();
    this.bitrates = null;

    let timer: Subscription = TimerObservable.create(0, 10).subscribe(
        () => {
            this.currentStream = stream;
            timer.unsubscribe();
        }
    );
  }
}

Could someone suggest where I could make a mistake or send some correct implementation of vgDash in component. (at the top I posted a link to my project on github if it could help)

The basic example from videogular2 where the player plays the mp4 file works for me without a problem when I paste it into player.component.html:

<vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-scrub-bar [vgSlider]="true">
      <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-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
    </video>
</vg-player>

But I care about DASH support in the Component not html.

The latest dashjs package is missing that specific function.

Downgrade to an older version:

npm install dashjs@2.9.3 --save

---

Spent way too much time trying to figure this out, I was having the exact same issue.