错误ReferenceError：'videojs未在角度cli中定义'？

Question

我正在将我的 angular 2 项目从 systemjs 转换为 angular cli。我从 index.html 中删除了所有 js 和 css 文件，并将所有文件和 videojs css 和 js 文件包含在 angular-cli.json 中， 项目编译正确，但在执行中我收到错误“未定义videojs”， 如果我在 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();
          }
    }
  }

播放视频.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

这里有几件事

1. ngOnInit 下的代码缺少结束 )

2. 如果你直接访问 dom，你应该使用AfterViewInit 而不是OnInit。 (document.getElementById)

3. 您需要安装@types/videojs 定义。 或者，您可以使用window["videojs"]()，因为videojs 将在窗口变量上。

4. 我刚刚做了你所做的，将video.min.js添加到src/assets/js/video.min.js，然后在.angular-cli.json中添加"./assets/js/videojs/video.min.js"到scripts。完成上述操作后，它就可以正常工作了。