search

videogular / videogular2

The HTML5 video player for Angular 2
https://videogular.github.io/videogular2-showroom/#/
MIT License
670 stars 211 forks source link

Compilation error in Angular 10 #904

Closed goodidea-kp closed 4 years ago

goodidea-kp commented 4 years ago

Description

Describe the issue or new feature. Compilation error angular-cli 10, TypeScript 3.9.5:

ERROR in node_modules/videogular2/compiled/src/core/vg-media/i-media-element.d.ts:17:27 - error TS2304: Cannot find name 'AudioTrackList'.

17 readonly audioTracks: AudioTrackList;

node_modules/videogular2/compiled/src/core/vg-media/i-media-element.d.ts:139:27 - error TS2304: Cannot find name 'VideoTrackList'.

139     readonly videoTracks: VideoTrackList;

node_modules/videogular2/compiled/src/core/vg-media/vg-media-element.d.ts:5:27 - error TS2304: Cannot find name 'AudioTrackList'.

5 readonly audioTracks: AudioTrackList;

node_modules/videogular2/compiled/src/core/vg-media/vg-media-element.d.ts:42:18 - error TS2304: Cannot find name 'VideoTrackList'.

42     videoTracks: VideoTrackList;

Expected Behavior

If this is an issue, document the expected behavior. If this is a feature, delete this block. success in compilation

Actual Behavior

If this is an issue, describe the actual behavior. If this is a feature, delete this block. error

Steps to Reproduce

If this is an issue, describe the steps you took to see the issue. If this is a feature, delete this block.

  1. ng build

Attachments

Try to include screenshots for bugs or design assets for enhancements

Image Title
(https://media.giphy.com/media/143vPc6b08locw/giphy.gif)
Image description
IxquitilisSaid commented 4 years ago

Hello, thanks for using our package! On v9+ please use https://www.npmjs.com/package/@videogular/ngx-videogular

goodidea-kp commented 4 years ago

it works. If possible please create migration instructions from videogular2 to ngx-videogular

IxquitilisSaid commented 4 years ago

Yup! Currently writing the docs for that

SergDerbst commented 4 years ago

Hm, I've had the same issue and switched to ngx-videogular after uninstalling videogular2.

Unfortunately, the issue remains. Any idea why?

lanxuexing commented 4 years ago

I found that the TS team recently removed these two type definitions from lib.dom.d.ts Rerun LKG to remove 'awaited' type (#37616)

lashisu commented 4 years ago

it works. If possible please create migration instructions from videogular2 to ngx-videogular

Can you please share stackblitz URL? I am still getting same error. Need urgent help.

lashisu commented 4 years ago

Yup! Currently writing the docs for that

Hey, Help needed. Not working yet.

hubaokun commented 3 years ago

lib.dom.d.ts

So what is the solution?

hubaokun commented 3 years ago

Hello, thanks for using our package! On v9+ please use https://www.npmjs.com/package/@videogular/ngx-videogular

The same problem for ngx-videogular on angular 10, what is the solution? thanks

sagun786 commented 3 years ago

@IxquitilisSaid I am also getting the same error 

[ng] ERROR in node_modules/ngx-videogular/lib/core/vg-media/i-media-element.d.ts:17:27 - error TS2304: Cannot find name 'AudioTrackList'.
[ng] 17     readonly audioTracks: AudioTrackList;
[ng]                              ~~~~~~~~~~~~~~
[ng] node_modules/ngx-videogular/lib/core/vg-media/i-media-element.d.ts:139:27 - error TS2304: Cannot find name 'VideoTrackList'.
[ng] 139     readonly videoTracks: VideoTrackList;
[ng]                               ~~~~~~~~~~~~~~
[ng] node_modules/ngx-videogular/lib/core/vg-media/vg-media-element.d.ts:5:24 - error TS2304: Cannot find name 'AudioTrackList'.
[ng] 5     get audioTracks(): AudioTrackList;
[ng]                          ~~~~~~~~~~~~~~
[ng] node_modules/ngx-videogular/lib/core/vg-media/vg-media-element.d.ts:42:18 - error TS2304: Cannot find name 'VideoTrackList'.
[ng] 42     videoTracks: VideoTrackList;

Angular 10 Ionic 5 Latest

IxquitilisSaid commented 3 years ago

https://github.com/videogular/ngx-videogular/issues/17 https://github.com/videogular/ngx-videogular/issues/18

@sagun786 you installed ngx-videogular, not @videogular/ngx-videogular @hubaokun which version of videogular are you on? If < 2.0.0, please update.

hubaokun commented 3 years ago

hi Jaime , thank you for your reply, I use angular 10, I have updated package.json to "@videogular/ngx-videogular": "2.0.0", but now the errors show can not find VgPlayer and VgMedia

in the module file import {VgBufferingModule} from '@videogular/ngx-videogular/buffering'; import {VgOverlayPlayModule} from '@videogular/ngx-videogular/overlay-play'; import {VgCoreModule} from '@videogular/ngx-videogular/core'; import {VgControlsModule} from '@videogular/ngx-videogular/controls';

and then @NgModule({ declarations: [ VideosComponent, VideoComponent, AudioComponent ], imports: [ RouterModule.forChild(routes), CommonModule, VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule, MatUsedModule ], exports: [ VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule, VideosComponent, VideoComponent, AudioComponent ]

}) export class MediaModule {

So How to import VgAPI and so on after updated?

hubaokun commented 3 years ago

hi Jaime , thank you for your reply, I use angular 10, I have updated package.json to "@videogular/ngx-videogular": "2.0.0", but now the errors show can not find VgPlayer and VgMedia

in the module file import {VgBufferingModule} from '@videogular/ngx-videogular/buffering'; import {VgOverlayPlayModule} from '@videogular/ngx-videogular/overlay-play'; import {VgCoreModule} from '@videogular/ngx-videogular/core'; import {VgControlsModule} from '@videogular/ngx-videogular/controls';

and then @NgModule({ declarations: [ VideosComponent, VideoComponent, AudioComponent ], imports: [ RouterModule.forChild(routes), CommonModule, VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule, MatUsedModule ], exports: [ VgCoreModule, VgControlsModule, VgOverlayPlayModule, VgBufferingModule, VideosComponent, VideoComponent, AudioComponent ]

}) export class MediaModule {

So How to import VgAPI and so on after updated?

Seems fixed follow the instruction on https://github.com/videogular/ngx-videogular/blob/master/docs/ngx-videogular-demo/SUMMARY.md

IxquitilisSaid commented 3 years ago

Glad you were able to figure it out and that everything works now 😄 Either way, I'll be done with the migration guide this week, full stop

RouTingShi commented 3 years ago

Seems fixed follow the instruction on https://github.com/videogular/ngx-videogular/blob/master/docs/ngx-videogular-demo/SUMMARY.md

I referenced the instructions step by step,but still ERROR.I need someone to help me ,please. error

IxquitilisSaid commented 3 years ago

@RouTingShi just a quick check: can you send your NgModule?

RouTingShi commented 3 years ago

@RouTingShi just a quick check: can you send your NgModule?

Thank you so much.

`import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { NavbarComponent } from './navbar/navbar.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { CommonModule } from '@angular/common';

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, NavbarComponent ], imports: [ BrowserModule, AppRoutingModule, NgbModule, FormsModule, ReactiveFormsModule, CommonModule,

VgCoreModule,
VgControlsModule,
VgOverlayPlayModule,
VgBufferingModule,

], providers: [], bootstrap: [AppComponent], }) export class AppModule { }`

IxquitilisSaid commented 3 years ago

@RouTingShi so for the first error, I'm assuming you didn't implement a method called onPlayerReady in your VideosComponent

As for the second one... Sorry, I have to ask you something again. Which version of the lib are you using? If it's 2.1.0, then ok. Lastly, are you using strictTemplates in your tsconfig's angularCompilerOptions? If so, try this [vgMedia]="$any(media)" in your markup

RouTingShi commented 3 years ago

@IxquitilisSaid Yes,it's 2.1.0. I tried "[vgMedia]="$any(media)" and it succeeded.The first error isn't important. I truly appreciate your help.

IxquitilisSaid commented 3 years ago

My pleasure! Glad that your issue is fixed 😄

appireddy-peketi commented 3 years ago

This is Appireddy, currently i am using angular 11. when i was install ngx-videoglar for custom video player. Run the code show below error is come . How to overcome this error error

IxquitilisSaid commented 3 years ago

@appireddy-peketi https://github.com/videogular/videogular2/issues/904#issuecomment-751728727

AnassL commented 3 years ago

strictTemplates in tsconfig's angularCompilerOptions is by default added in the newly generated projects in Angular 12+ so [vgMedia]="$any(media)" should be mentioned in the tutorial.