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

Question

我正在将我的角度2项目从systemjs转换为角度cli。我删除了index.html中的所有js和css文件，并在angular-cli.json中包含了所有文件和videojs css和js文件， 项目正确编译，但执行中出现错误“videojs未定义”， 我没有看到错误，如果我在index.html 包含videojs文件，你能帮我一把。如何解决角度cli中的这个错误？

角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

有几件事情她的Ë

1. ngOnInit下你的代码是缺少一个右)

2. 你应该使用AfterViewInit，而不是OnInit如果你直接访问DOM。 （document.getElementById）

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

4. 我刚才没有你做了什么，添加了video.min.js到src/assets/js/video.min.js然后.angular-cli.json加入"./assets/js/videojs/video.min.js"到scripts。完成上述操作后，它工作得很好。