エラーReferenceError：角度cliで 'videojsが定義されていません'？

Question

角度2のプロジェクトをsystemjsから角度cliに変換しています。私はindex.htmlからすべてのjsとcssファイルを削除し、angular-cli.jsonのプロジェクトに正しくコンパイルされたすべてのファイルとvideojs cssとjsファイルを含めましたが、実行時に "videojs is defined"というエラーが発生しました。 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

いくつかのこと彼女ngOnInit下の電子

1. あなたのコードは、あなたが直接DOMにアクセスする場合は、AfterViewInitなくOnInitを使用する必要がありクロージング)

2. が不足しています。 （document.getElementById）

3. @types/videojsの定義をインストールする必要があります。 の場合は、videojsがウィンドウのvarに表示されるため、window["videojs"]()を使用できます。

4. は、私はちょうどあなたがやったまさにやっている、scriptsに"./assets/js/videojs/video.min.js"を追加.angular-cli.jsonで、その後src/assets/js/video.min.jsにvideo.min.jsを追加しました。上記を実行した後にうまく動作します。