Description
Getting this error when trying to run your quick start guide.
Package.json:
{ "name": "freeamateur", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "~12.1.0", "@angular/common": "~12.1.0", "@angular/compiler": "~12.1.0", "@angular/core": "~12.1.0", "@angular/forms": "~12.1.0", "@angular/platform-browser": "~12.1.0", "@angular/platform-browser-dynamic": "~12.1.0", "@angular/router": "~12.1.0", "@fortawesome/angular-fontawesome": "^0.9.0", "@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-brands-svg-icons": "^5.15.3", "@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@videogular/ngx-videogular": "^4.0.0", "bootstrap": "^5.0.2", "core-js": "^3.15.1", "rxjs": "~7.1.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.1.0", "@angular/cli": "~12.1.0", "@angular/compiler-cli": "~12.1.0", "@types/core-js": "^2.5.4", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "jasmine-core": "~3.7.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "typescript": "~4.3.2" } }
Angular.json:
{ "name": "freeamateur", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "~12.1.0", "@angular/common": "~12.1.0", "@angular/compiler": "~12.1.0", "@angular/core": "~12.1.0", "@angular/forms": "~12.1.0", "@angular/platform-browser": "~12.1.0", "@angular/platform-browser-dynamic": "~12.1.0", "@angular/router": "~12.1.0", "@fortawesome/angular-fontawesome": "^0.9.0", "@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-svg-core": "^1.2.35", "@fortawesome/free-brands-svg-icons": "^5.15.3", "@fortawesome/free-regular-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@videogular/ngx-videogular": "^4.0.0", "bootstrap": "^5.0.2", "core-js": "^3.15.1", "rxjs": "~7.1.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~12.1.0", "@angular/cli": "~12.1.0", "@angular/compiler-cli": "~12.1.0", "@types/core-js": "^2.5.4", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "jasmine-core": "~3.7.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "typescript": "~4.3.2" } }
app.module.ts:
`import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { HomepageComponent } from './homepage/homepage.component';
import { VideoplayerComponent } from './videoplayer/videoplayer.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';
@NgModule({
declarations: [
AppComponent,
HomepageComponent,
VideoplayerComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule,
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule
],
providers: [],
bootstrap: [AppComponent],
exports:[
VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,]
})
export class AppModule { }
`
tsconfig.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */ { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "forceConsistentCasingInFileNames": true, "strict": false, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, "target": "es2017", "module": "es2020", "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, "strictTemplates": true } }
HTML:
`
<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-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-track-selector></vg-track-selector>
<vg-mute></vg-mute>
<vg-volume></vg-volume>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<video [vgMedia]="$any(media)" #media id="singleVideo" preload="auto" crossorigin>
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
<source src="http://static.videogular.com/assets/videos/videogular.ogg" type="video/ogg">
<source src="http://static.videogular.com/assets/videos/videogular.webm" type="video/webm">
<track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt" srclang="en" default>
<track kind="subtitles" label="Español" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt" srclang="es">
</video>
`
Error log:
Error: node_modules/@videogular/ngx-videogular/core/lib/directives/vg-media/vg-media-element.d.ts:32:23 - error TS2304: Cannot find name 'MSMediaKeyNeededEvent'.
32 onmsneedkey: (ev: MSMediaKeyNeededEvent) => any;
~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/@videogular/ngx-videogular/core/lib/interfaces/i-media-element.interface.d.ts:107:47 - error TS2304: Cannot find name 'MSMediaKeyNeededEvent'.
107 onmsneedkey: (this: HTMLMediaElement, ev: MSMediaKeyNeededEvent) => any;
~~~~~~~~~~~~~~~~~~~~~
Can someone help me? Thank you!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
