Unable to install via NPM in Angular application

[LexanRed]

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?

[welcome]

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

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]

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

"skipLibCheck": true,

[zorent-zebra]

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

+1

[cf-ts]

+1

[HarunDyn]

I keep getting error in Angular 15

[zorent-zebra]

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

> video.js@8.2.1 build:css
> npm-run-all build:css:*


> video.js@8.2.1 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]

I keep getting error in Angular 14

[Charlie50503]

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