video.js
video.js copied to clipboard
videojs
Unable to install via NPM in Angular application
Description
When installing vidoe.js via NPM and trying to include it in an Angular 15 application I get all kind of strange errors.
I assume the guide on https://videojs.com/guides/angular/ is outdated.
Also when trying to import the player like this: import Player from "video.js/dist/types/player"; The errors persist.
I also tried installing the video.js types. Unfortunately there are no types for v8 yet.
In anyway, it is not possible to install it via NPM into an Angular 15 application.
Error: node_modules/video.js/dist/types/component.d.ts:68:25 - error TS2304: Cannot find name 'Player'.
68 constructor(player: Player, options?: {
~~~~~~
Error: node_modules/video.js/dist/types/component.d.ts:71:8 - error TS1016: A required parameter cannot follow an optional parameter.
71 }, ready: any);
~~~~~
Error: node_modules/video.js/dist/types/component.d.ts:117:15 - error TS2304: Cannot find name 'Player'.
117 player(): Player;
~~~~~~
Error: node_modules/video.js/dist/types/event-target.d.ts:9:13 - error TS2395: Individual declarations in merged declaration 'EventTarget' must be all exported or all local.
9 export type EventTarget = () => any;
~~~~~~~~~~~
Error: node_modules/video.js/dist/types/event-target.d.ts:18:15 - error TS2395: Individual declarations in merged declaration 'EventTarget' must be all exported or all local.
18 declare class EventTarget {
~~~~~~~~~~~
Error: node_modules/video.js/dist/types/modal-dialog.d.ts:48:25 - error TS2304: Cannot find name 'Player'.
48 constructor(player: Player, options?: {
~~~~~~
Error: node_modules/video.js/dist/types/modal-dialog.d.ts:49:19 - error TS2304: Cannot find name 'Mixed'.
49 content?: Mixed;
~~~~~
Error: node_modules/video.js/dist/types/modal-dialog.d.ts:141:24 - error TS2304: Cannot find name 'Mixed'.
141 fillWith(content?: Mixed): void;
~~~~~
Error: node_modules/video.js/dist/types/modal-dialog.d.ts:164:21 - error TS2304: Cannot find name 'Mixed'.
164 content(value?: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/modal-dialog.d.ts:164:29 - error TS2304: Cannot find name 'Mixed'.
164 content(value?: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/modal-dialog.d.ts:165:15 - error TS2304: Cannot find name 'Mixed'.
165 content_: Mixed;
~~~~~
Error: node_modules/video.js/dist/types/player.d.ts:36:46 - error TS1016: A required parameter cannot follow an optional parameter.
36 constructor(tag: Element, options?: any, ready: any);
~~~~~
Error: node_modules/video.js/dist/types/player.d.ts:678:15 - error TS2552: Cannot find name 'TimeRange'. Did you mean 'TimeRanges'?
678 played(): TimeRange;
~~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:14133:13
14133 declare var TimeRanges: {
~~~~~~~~~~
'TimeRanges' is declared here.
Error: node_modules/video.js/dist/types/player.d.ts:750:17 - error TS2552: Cannot find name 'TimeRange'. Did you mean 'TimeRanges'?
750 buffered(): TimeRange;
~~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:14133:13
14133 declare var TimeRanges: {
~~~~~~~~~~
'TimeRanges' is declared here.
Error: node_modules/video.js/dist/types/player.d.ts:1359:64 - error TS2552: Cannot find name 'HtmlTrackElement'. Did you mean 'HTMLTrackElement'?
1359 addRemoteTextTrack(options: any, manualCleanup?: boolean): HtmlTrackElement;
~~~~~~~~~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:8344:13
8344 declare var HTMLTrackElement: {
~~~~~~~~~~~~~~~~
'HTMLTrackElement' is declared here.
Error: node_modules/video.js/dist/types/plugin.d.ts:5:13 - error TS2395: Individual declarations in merged declaration 'Plugin' must be all exported or all local.
5 export type Plugin = {
~~~~~~
Error: node_modules/video.js/dist/types/plugin.d.ts:35:15 - error TS2395: Individual declarations in merged declaration 'Plugin' must be all exported or all local.
35 declare class Plugin {
~~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:57:35 - error TS2304: Cannot find name 'Player'.
57 export function setSource(player: Player, src: any, next: any): void;
~~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:67:50 - error TS2304: Cannot find name 'Tech'.
67 export function setTech(middleware: any[], tech: Tech): void;
~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:84:46 - error TS2304: Cannot find name 'Tech'.
84 export function get(middleware: any[], tech: Tech, method: string): Mixed;
~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:84:69 - error TS2304: Cannot find name 'Mixed'.
84 export function get(middleware: any[], tech: Tech, method: string): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:104:46 - error TS2304: Cannot find name 'Tech'.
104 export function set(middleware: any[], tech: Tech, method: string, arg: Mixed): Mixed;
~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:104:73 - error TS2304: Cannot find name 'Mixed'.
104 export function set(middleware: any[], tech: Tech, method: string, arg: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:104:81 - error TS2304: Cannot find name 'Mixed'.
104 export function set(middleware: any[], tech: Tech, method: string, arg: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:128:50 - error TS2304: Cannot find name 'Tech'.
128 export function mediate(middleware: any[], tech: Tech, method: string, arg?: Mixed): Mixed;
~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:128:78 - error TS2304: Cannot find name 'Mixed'.
128 export function mediate(middleware: any[], tech: Tech, method: string, arg?: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:128:86 - error TS2304: Cannot find name 'Mixed'.
128 export function mediate(middleware: any[], tech: Tech, method: string, arg?: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:135:45 - error TS2304: Cannot find name 'Player'.
135 export function clearCacheForPlayer(player: Player): void;
~~~~~~
Error: node_modules/video.js/dist/types/tech/middleware.d.ts:170:42 - error TS2304: Cannot find name 'Player'.
170 export type MiddlewareFactory = (player: Player) => any;
~~~~~~
Error: node_modules/video.js/dist/types/tech/tech.d.ts:5:13 - error TS2395: Individual declarations in merged declaration 'Tech' must be all exported or all local.
5 export type Tech = any | string;
~~~~
Error: node_modules/video.js/dist/types/tech/tech.d.ts:12:15 - error TS2395: Individual declarations in merged declaration 'Tech' must be all exported or all local.
12 declare class Tech extends Component {
~~~~
Error: node_modules/video.js/dist/types/tech/tech.d.ts:127:17 - error TS2304: Cannot find name 'TimeRange'.
127 buffered(): TimeRange;
~~~~~~~~~
Error: node_modules/video.js/dist/types/tech/tech.d.ts:239:15 - error TS2304: Cannot find name 'TimeRange'.
239 played(): TimeRange;
~~~~~~~~~
Error: node_modules/video.js/dist/types/tech/tech.d.ts:485:26 - error TS2304: Cannot find name 'bolean'.
485 featuresMuteControl: bolean;
~~~~~~
Error: node_modules/video.js/dist/types/tracks/text-track.d.ts:8:15 - error TS2415: Class 'TextTrack' incorrectly extends base class 'Track'.
Property 'allowedEvents_' is private in type 'Track' but not in type 'TextTrack'.
8 declare class TextTrack extends Track {
~~~~~~~~~
Error: node_modules/video.js/dist/types/tracks/text-track.d.ts:44:15 - error TS2304: Cannot find name 'Tech'.
44 tech: Tech;
~~~~
Error: node_modules/video.js/dist/types/tracks/track-list.d.ts:8:15 - error TS2415: Class 'TrackList' incorrectly extends base class 'EventTarget'.
Types have separate declarations of a private property 'allowedEvents_'.
8 declare class TrackList extends EventTarget {
~~~~~~~~~
Error: node_modules/video.js/dist/types/tracks/track-list.d.ts:17:26 - error TS2304: Cannot find name 'Track'.
17 constructor(tracks?: Track[]);
~~~~~
Error: node_modules/video.js/dist/types/tracks/track-list.d.ts:27:21 - error TS2304: Cannot find name 'Track'.
27 addTrack(track: Track): void;
~~~~~
Error: node_modules/video.js/dist/types/tracks/track-list.d.ts:36:25 - error TS2304: Cannot find name 'Track'.
36 removeTrack(rtrack: Track): void;
~~~~~
Error: node_modules/video.js/dist/types/utils/dom.d.ts:17:29 - error TS2304: Cannot find name 'Mixed'.
17 export function isEl(value: Mixed): boolean;
~~~~~
Error: node_modules/video.js/dist/types/utils/dom.d.ts:44:80 - error TS1016: A required parameter cannot follow an optional parameter.
44 export function createEl(tagName?: string, properties?: any, attributes?: any, content: any): Element;
~~~~~~~
Error: node_modules/video.js/dist/types/utils/dom.d.ts:291:35 - error TS2304: Cannot find name 'Mixed'.
291 export function isTextNode(value: Mixed): boolean;
~~~~~
Error: node_modules/video.js/dist/types/utils/events.d.ts:40:68 - error TS1016: A required parameter cannot follow an optional parameter.
40 export function off(elem: Element | any, type?: string | string[], fn: any): void;
~~
Error: node_modules/video.js/dist/types/utils/fn.d.ts:2:32 - error TS2304: Cannot find name 'Mixed'.
2 export function bind_(context: Mixed, fn: Function, uid?: number): Function;
~~~~~
Error: node_modules/video.js/dist/types/utils/log.d.ts:3:15 - error TS2304: Cannot find name 'Mixed'.
3 (...args: Mixed[]): void;
~~~~~
Error: node_modules/video.js/dist/types/utils/log.d.ts:14:20 - error TS2304: Cannot find name 'Mixed'.
14 error(...args: Mixed[]): any;
~~~~~
Error: node_modules/video.js/dist/types/utils/log.d.ts:15:19 - error TS2304: Cannot find name 'Mixed'.
15 warn(...args: Mixed[]): any;
~~~~~
Error: node_modules/video.js/dist/types/utils/log.d.ts:16:20 - error TS2304: Cannot find name 'Mixed'.
16 debug(...args: Mixed[]): any;
~~~~~
Error: node_modules/video.js/dist/types/utils/obj.d.ts:28:61 - error TS2304: Cannot find name 'Mixed'.
28 export function reduce(object: any, fn: Function, initial?: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/utils/obj.d.ts:28:69 - error TS2304: Cannot find name 'Mixed'.
28 export function reduce(object: any, fn: Function, initial?: Mixed): Mixed;
~~~~~
Error: node_modules/video.js/dist/types/utils/obj.d.ts:78:27 - error TS2304: Cannot find name 'Mixed'.
78 export type obj = (value: Mixed, key: string) => any;
~~~~~
Error: node_modules/video.js/dist/types/video.d.ts:88:14 - error TS2304: Cannot find name 'version'.
88 export { version as VERSION };
~~~~~~~
✖ Failed to compile.
Reduced test case
No response
Steps to reproduce
- Create angular application
- npm i --save-dev video.js
- Add video.js according to the guide (https://videojs.com/guides/angular/)
Errors
No response
What version of Video.js are you using?
8.0.4
Video.js plugins used.
None
What browser(s) including version(s) does this occur with?
What OS(es) and version(s) does this occur with?
👋 Thanks for opening your first issue here! 👋
If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.
![welcome[bot] avatar](https://avatars.githubusercontent.com/in/4141?v=4 "Published by a pub.dev verified publisher"){kind=small}
I know a fix is in code review, and I super appreciate the video.js team's very fast response time to this. Just wanted to echo that this is a blocker for us as well. We're running angular 14 and video.js can't be installed for us either.
@LexanRed This issue was resolved by adding the below option to tsconfig.json file.
"skipLibCheck": true,
@ashwiniLiman thanks for the note. Very helpful to know. While I'm not sure that our team would approve such a change, it's def very good to know as an option.
For the video.js team: I just installed version 8.2.0 which includes https://github.com/videojs/video.js/pull/8148
We still have a ton of errors using angular 14.
import videojs, { VideoJsPlayerOptions } from 'video.js';
Module '"video.js"' has no exported member 'VideoJsPlayerOptions'
'videojs' has no exported member named 'Player'
Namespace 'videojs' has no exported member 'Component'
Namespace 'videojs' has no exported member 'ProgressControl'
If we need to change our imports, would be great if there could be a guide.
In any case, thanks again for your library. We use it a lot and it's great.
Hello again.
I think I'm on to a root cause.
in package.json, npm run build calls npm-run-all
That calls npm run build:css:cdn before npm run build:types
npm run build:css:cdn fails
> [email protected] build:css
> npm-run-all build:css:*
> [email protected] build:css:cdn
> sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css
Error: Can't find stylesheet to import.
╷
5 │ @import "videojs-font/scss/icons";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\css\video-js.scss 5:9 @import
src\css\vjs-cdn.scss 3:9 root stylesheet
ERROR: "build:css:cdn" exited with 65.
ERROR: "build:css" exited with 1.
ERROR: "build-dev" exited with 1.
So it never gets to
npm run build:types
Please upon please fix the issues building everything and this might fix angular 15 not installing. Because then it'll install types and we can then see if it'll work.
Please see this: https://github.com/videojs/video.js/issues/7208#issuecomment-868997478
I then made the following fix locally: https://github.com/videojs/video.js/blob/main/package.json
Replace this:
"build:css:cdn": "sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css",
With this:
"build:css:cdn": "sass --load-path=./ --load-path=./node_modules/ --no-source-map src/css/vjs-cdn.scss dist/alt/video-js-cdn.css",
Then replace this:
"build:css:default": "sass --load-path='./' --load-path='./node_modules/' --no-source-map src/css/vjs.scss dist/video-js.css",
With this:
"build:css:default": "sass --load-path=./ --load-path=./node_modules/ --no-source-map src/css/vjs.scss dist/video-js.css",
I might make a PR soon if I can.
Thanks!!
After rolling back video.js to version 7.21.2, the problem was resolved
I am not sure why you folks keep spamming the +1. Obviously it is not fixed. Maybe we can start spending some time debugging the issue and providing a fix? Give and be given.
Maybe this attempt of fixing the issue is a good starting point: https://github.com/videojs/video.js/pull/8217 I am in no rush updating to v8, but I will try to find some time soon to look into this.
@lksnmnn thanks for your comment. I wish I had more time to debug. Thank you for the offer to look into this when you have time. So many people appreciate it.
As you can see above, the first thing I did was try to build it locally. That's how I got to the original PR.
We have video.js 7 in our angular application. When I took the branch I have in the PR and installed it locally, I still got runtime errors. Which is why the PR went into draft form.
In video.js 7 they seemed to use the types/video.js npm library for types and now it seems to be inside this module. Wish I could give you more info or I had more time to work on this.
Any movement on this, just tried to upgrade to video.js version 8.3 and seeing the same above mentioned errors with an Angular 15 app.
I opened a PR that fixes all issues in 8.5.0.
is this planning to be merged, I would love to upgrade my videojs to 8.5 inside an angular 15 project.
After updating to 8.6.1 which includes the PR fix from @mattcwebster, I get an additional errors following the same convention as the Angular guide. https://videojs.com/guides/angular/
error TS2724: 'videojs' has no exported member named 'Player'. Did you mean 'players'? player: videojs.Player;
@psiservices-ben-voytko I use import type Player from 'video.js/dist/types/player';.
@boris-petrov Thanks, that seems to work. Just looks like the guide needs to be updated.
@psiservices-ben-voytko I use
import type Player from 'video.js/dist/types/player';.
This is not working for me.
I haven't gone through our application extensively to upgrade. It's a lot of work, and we have other priorities at the moment. At first glance it looks like the latest code in 8.6.1 gives us the ability to use video.js version 8 with angular. Obviously until we get it up and running totally we can't be sure.
There are a large number of types under video.js/dist/types and they're well organized. The first step will be to change whatever we were using before to the new ones. The only 1 which I noticed seemed to be missing is what used to be VideoJsPlayerOptions. Examples:
import type Player from 'video.js/dist/types/player';
import type Component from 'video.js/dist/types/component';
import type ModalDialog from 'video.js/dist/types/modal-dialog';
import type ProgressControl from 'video.js/dist/types/control-bar/progress-control/progress-control';
Also seems like creating a modal has totally changed. Could also be that adding a button to the control bar has changed. Hoping wouldn't be too big a deal if I had time.
Just wanted to thank all the contributors to this project. This was a lot of work and at first glance the latest release will very possibly solve what was blocking us.
Small note: would be great if the migration guide had more for those of us using angular: https://videojs.com/guides/videojs-7-to-8/
Just wanted to add that this morning I successfully ran videojs version 8.9.0 with angular. Thank you everybody!!!!!!!!!!!!!!!!!
I found 3 more issues compiling and wanted to post some of the fixes we did.
player.controlBar doesn't exist any more. So here's how we added a new button to the control bar:
import type ControlBar from 'video.js/dist/types/control-bar/control-bar';
const controlBarObj: ControlBar = player.getChild('ControlBar') as ControlBar;
if (controlBarObj) {
const someCustomBtn = controlBarObj.addChild('Button');
}
We had a JS error in our code for a custom button in the toolbar.
We were originally doing player.controlBar.children() to get all the buttons in the control bar.
Now we need to do:
import type ControlBar from 'video.js/dist/types/control-bar/control-bar';
const controlBarObj: ControlBar = player.getChild('ControlBar') as ControlBar;
const playerButtons = controlBarObj.children();
Also for modal dialogs: if you add a modal dialog as a child, you need to caste it to a component.
import type ModalDialog from 'video.js/dist/types/modal-dialog';
import type Component from 'video.js/dist/types/component';
const modalObj = videojs.getComponent('ModalDialog') as any;
const modalElement = getSomeHTMLForDialog();
const videoJsMessageOverlay: ModalDialog = new modalObj(player, {
temporary: false, content: modalElement, uncloseable: true
});
player.addChild(videoJsMessageOverlay as Component);