ERROR ReferenceError: 'videojs is not defined ' in angular cli?

Question

我正在将我的 angular 2 项目从 systemjs 转换为 angular cli。我从 index.html 中删除了所有 js 和 css 文件，并在 angular-cli.json 中包含了所有文件和 videojs css 和 js 文件，项目编译正确但在执行过程中出现错误 "videojs is not defined"，如果我在 index.html 中包含 videojs 文件，我不会看到错误你能帮我吗。如何解决 angular cli 中的这个错误？

angular-cli.json 文件

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "angular-cli-project"
    },
    "apps": [{
        "root": "src",
        "outDir": "dist",
        "assets": [
            "assets",
            "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
            "styles.css",
            "./assets/admin/pages/css/lock.css",
            "./assets/css/dashboardPage.css",
            "./assets/css/facebook.css",
            "./assets/css/form.errors.css",
            "./assets/js/videoCapturing/videojs.record.min.css",
            "./assets/js/videojs/video-js.css",

        ],
        "scripts": [
            "./assets/js/videojs/video.min.js",
            "./assets/js/videoCapturing/RecordRTC.js",
            "./assets/js/videojsvideojs.record.js",
            "./assets/js/videojs/videojs-contrib-hls.js",
            "./assets/js/videojs/videojs.hotkeys.min.js",

        ],
        "environmentSource": "environments/environment.ts",
        "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
        }
    }],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [{
            "project": "src/tsconfig.app.json"
        },
        {
            "project": "src/tsconfig.spec.json"
        },
        {
            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "css",
        "component": {}
    }
}

组件代码：

import {Component,OnInit, OnDestroy } from '@angular/core';
declare var videojs :any;

@Component({
  selector: 'app-play-video',
  templateUrl: './play-video.component.html',
  styleUrls : [] 
 })
export class PlayVideoComponent implements OnInit{
public videoJSplayer :any;

  ngOnInit() {
    this.videoJSplayer = videojs(document.getElementById('example_video_11'), {}, function() {   // here videojs is undefined.
            this.play();
          }
    }
  }

播放-video.component.html :

<video id="example_video_11" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
</video>

project structure image

Answer 1

这里有几件事

您在 ngOnInit 下的代码缺少结束符 )
如果您直接访问 dom，您应该使用 AfterViewInit 而不是 OnInit。 (document.getElementById)
您需要安装 @types/videojs 定义。或者，您可以使用 window["videojs"]()，因为 videojs 将在 window var.
我刚刚做了你所做的，将 video.min.js 添加到 src/assets/js/video.min.js 然后在 .angular-cli.json 添加 "./assets/js/videojs/video.min.js" 到 scripts.完成上述操作后效果很好。

ERROR ReferenceError: 'videojs is not defined ' in angular cli?

ERROR ReferenceError: 'videojs is not defined ' in angular cli?

video.js

angular-cli

angular