錯誤參考錯誤：在角度cli中'videojs未定義'？

我正在將我的角度2項目從systemjs轉換爲角度cli。我刪除了index.html中的所有js和css文件，並在angular-cli.json中包含了所有文件和videojs css和js文件，項目正確編譯，但執行中出現錯誤「videojs未定義」，我沒有看到錯誤，如果我在index.html 包含videojs文件，你能幫我一把。如何解決角度cli中的這個錯誤？錯誤參考錯誤：在角度cli中'videojs未定義'？

角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

來源

2017-04-24 Sathish Kotha

如果您打開chrome控制檯並嘗試'videojs'它是未定義的？ –

是的，我看到console.videojs中的錯誤是未定義的 –

有幾件事情她的Ë

ngOnInit下你的代碼是缺少一個右)
你應該使用AfterViewInit，而不是OnInit如果你直接訪問DOM。（document.getElementById）
您需要安裝@types/videojs的定義。或者，您可以使用window["videojs"]()，因爲videojs將在窗口var上。
我剛纔沒有你做了什麼，添加了video.min.js到src/assets/js/video.min.js然後.angular-cli.json加入"./assets/js/videojs/video.min.js"到scripts。完成上述操作後，它工作得很好。

來源

2017-04-24 15:18:28

謝謝你的回答Ahmed Musallam，它的工作完美。 –

高興地幫助:) –

錯誤參考錯誤：在角度cli中'videojs未定義'？

回答

相關問題