Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to install via NPM in Angular application #8141

Open
LexanRed opened this issue Feb 18, 2023 · 28 comments
Open

Unable to install via NPM in Angular application #8141

LexanRed opened this issue Feb 18, 2023 · 28 comments
Labels
bug needs: triage This issue needs to be reviewed

Comments

@LexanRed
Copy link

LexanRed commented Feb 18, 2023

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

  1. Create angular application
  2. npm i --save-dev video.js
  3. 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?

@LexanRed LexanRed added bug needs: triage This issue needs to be reviewed labels Feb 18, 2023
@welcome
Copy link

welcome bot commented Feb 18, 2023

👋 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.

@zorent-zebra
Copy link

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.

@ashwiniLiman
Copy link

ashwiniLiman commented Mar 4, 2023

@LexanRed This issue was resolved by adding the below option to tsconfig.json file.

"skipLibCheck": true,

@zorent-zebra
Copy link

@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 #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.

@Ruslancic
Copy link

+1

1 similar comment
@cf-ts
Copy link

cf-ts commented Mar 20, 2023

+1

ad1217 added a commit to ad1217/PrinterStatus that referenced this issue Mar 28, 2023
@HarunDyn
Copy link

I keep getting error in Angular 15

@zorent-zebra
Copy link

zorent-zebra commented Mar 29, 2023

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:
#7208 (comment)

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!!

@mohamed-elhar
Copy link

I keep getting error in Angular 14

@Charlie50503
Copy link

After rolling back video.js to version 7.21.2, the problem was resolved

@bruno-lopes
Copy link

@Charlie50503 thanks for the workaround.

@MauricioPaez
Copy link

+1

@yevarizhko
Copy link

This problem still persists in 8.3.0

@tbydza
Copy link

tbydza commented May 30, 2023

+1

@Nightcro
Copy link

Nightcro commented Jun 6, 2023

+1

Same issues with 8.4.1

@s0l4r
Copy link

s0l4r commented Jun 12, 2023

+1

1 similar comment
@Tonio31
Copy link

Tonio31 commented Jun 22, 2023

+1

@lksnmnn
Copy link

lksnmnn commented Jun 22, 2023

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: #8217
I am in no rush updating to v8, but I will try to find some time soon to look into this.

@zorent-zebra
Copy link

@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.

@boris-petrov
Copy link
Contributor

I opened a PR that fixes all issues in 8.5.0.

@mattcwebster
Copy link

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.

@mattcwebster
Copy link

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.

@ben-voytko-talogy
Copy link

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;

@boris-petrov
Copy link
Contributor

@psiservices-ben-voytko I use import type Player from 'video.js/dist/types/player';.

@ben-voytko-talogy
Copy link

ben-voytko-talogy commented Oct 30, 2023

@boris-petrov Thanks, that seems to work. Just looks like the guide needs to be updated.

@moulib-narayana
Copy link

@psiservices-ben-voytko I use import type Player from 'video.js/dist/types/player';.

This is not working for me.

@zorent-zebra
Copy link

zorent-zebra commented Nov 21, 2023

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/

@zorent-zebra
Copy link

zorent-zebra commented Jan 9, 2024

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);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug needs: triage This issue needs to be reviewed
Projects
None yet
Development

No branches or pull requests