this.mutationObs.unsubscribe() Cannot read property 'unsubscribe' of undefined

Description

I am getting this exception while changing the routes

Expected Behavior

the page of selected route shoud be display withouth exception on VgMedia

Actual Behavior

Error description: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined TypeError: Cannot read property 'unsubscribe' of undefined at VgMedia.ngOnDestroy (vg-media.js:404) at callProviderLifecycles (core.js:12712) at callElementProvidersLifecycles (core.js:12673) at callLifecycleHooksChildrenFirst (core.js:12656) at destroyView (core.js:14022) at callViewAction (core.js:14173) at execComponentViewsAction (core.js:14085) at destroyView (core.js:14021) at callWithDebugContext (core.js:15056) at Object.debugDestroyView [as destroyView] (core.js:14607) at VgMedia.ngOnDestroy (vg-media.js:404) at callProviderLifecycles (core.js:12712) at callElementProvidersLifecycles (core.js:12673) at callLifecycleHooksChildrenFirst (core.js:12656) at destroyView (core.js:14022) at callViewAction (core.js:14173) at execComponentViewsAction (core.js:14085) at destroyView (core.js:14021) at callWithDebugContext (core.js:15056) at Object.debugDestroyView [as destroyView] (core.js:14607) at resolvePromise (zone.js:809) at resolvePromise (zone.js:775) at eval (zone.js:858) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595) at ZoneTask.invokeTask [as invoke] (zone.js:500) at invokeTask (zone.js:1517)

Steps to Reproduce

HTML page definition:

  <div class="col-lg-4">
      <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-rss fa-fw"></i>
                Channel 8
            </h3>
          </div>
          <div class="panel-body bodyColor">
            <vg-player (onPlayerReady)="onPlayerReady($event)">
                <video #media8
                      [vgMedia]="media8"
                      [vgHls]="video8"
                      id="myVideo"
                      type="video/mp4"
                      preload="auto"
                      controls
                      crossorigin>
                </video>
            </vg-player>
          </div>
      </div>
  </div>
</div>

Component.ts:

import { Component, OnInit, Input, ViewChild} from '@angular/core';
import { NodeBalancerService} from '../services/node-balancer.service';
import { NodeModel } from '../model/nodeModel';
import { VgAPI} from 'videogular2/core';
import { VgHLS } from 'videogular2/src/streaming/vg-hls/vg-hls';

@Component({
  selector: 'app-video-checker',
  templateUrl: './video-checker.component.html',
  styleUrls: ['./video-checker.component.css']
})
export class VideoCheckerComponent implements OnInit {
  @ViewChild(VgHLS) vgHls: VgHLS;
  preload = 'auto';
  api: VgAPI;
  video8 = 'http://localhost/ocho/index.m3u8';

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

  ngOnInit() {
  }
}

package.json

"dependencies": { "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "@types/c3": "^0.6.0", "@types/moment": "^2.13.0", "ag-grid": "^18.1.2", "ag-grid-angular": "^18.1.0", "ag-grid-enterprise": "^18.1.1", "c3": "^0.6.4", "core-js": "^2.4.1", "d3": "^5.5.0", "hls.js": "^0.10.1", "moment": "^2.22.1", "ng2-tree": "^2.0.0-rc.11", "npm": "^5.8.0", "rxjs": "^5.5.0", "rxjs-compat": "^6.0.0", "videogular2": "^6.3.0", "zone.js": "^0.8.19"

Attachments

Try to include screenshots for bugs or design assets for enhancements

Image Title
(https://media.giphy.com/media/143vPc6b08locw/giphy.gif)
Image description

videogular / videogular2