dashjs is not defined at VgDashDirective.createPlayer (vg-dash.directive.ts:96:17)

[Pod-Podeshwar]

Description

dashjs is not defined at VgDashDirective.createPlayer (vg-dash.directive.ts:96:17)

Steps to Reproduce

HTML

<video
#myMedia
[vgDash]="source?.source"
[vgDRMLicenseServer]="source?.licenseServers"
[vgDRMToken]="source?.token"
(onGetBitrates)="dashBitrates = $event"
#vgDash="vgDash"
(onGetBitrates)="hlsBitrates = $event"
id="my-video"
type="video/mp4"
controls

TS
import { Component, VERSION } from '@angular/core';

@component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
Hls:any
dashBitrates:any
hlsBitrates:any
name = 'Angular ' + VERSION.major;
source = {
source: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd',
licenseServers: {
'com.widevine.alpha': {
serverURL: 'https://widevine-proxy.appspot.com/proxy'
}
},
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}
constructor(){}

}

APP MODULE
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import Hls from 'hls.js'
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import {VgCoreModule} from '@videogular/ngx-videogular/core';
import {VgControlsModule} from '@videogular/ngx-videogular/controls';
import {VgOverlayPlayModule} from '@videogular/ngx-videogular/overlay-play';
import {VgBufferingModule} from '@videogular/ngx-videogular/buffering';
import {VgStreamingModule} from '@videogular/ngx-videogular/streaming';
@NgModule({
imports: [ BrowserModule, FormsModule,VgCoreModule,VgControlsModule,VgOverlayPlayModule,VgBufferingModule,VgStreamingModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

ANGULAR.JSON

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"node_modules/@videogular/ngx-videogular/fonts/videogular.css",
"src/styles.css"
],
"scripts": [
"node_modules/dashjs/dist/dash.all.min.js",
"node_modules/hls.js/dist/hls.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "demo:build"
},
"configurations": {
"production": {
"browserTarget": "demo:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demo:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": ["styles.css"],
"scripts": [
"node_modules/dashjs/dist/dash.all.min.js",
"node_modules/hls.js/dist/hls.min.js"
],
"assets": ["src/favicon.ico", "src/assets"]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["/node_modules/"]
}
}
}
}
},
"defaultProject": "demo"
}

PACKAGE.JSON

{
"name": "angular",
"version": "0.0.0",
"private": true,
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"dependencies": {
"@3": "*",
"@angular/animations": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
"@videogular/ngx-videogular": "^6.0.0",
"core-js": ">=2.5.4",
"dashjs": "3",
"hls.js": "^1.2.7",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.0",
"@angular/cli": "~14.0.0",
"@angular/compiler-cli": "^14.0.0",
"@types/jasmine": "~4.0.0",
"jasmine-core": "~4.1.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.7.2"
}
}

Attachments

https://i.ibb.co/4RL3QfW/Screenshot-from-2022-11-17-18-03-46.png