ERROR ReferenceError : 각도 cli에서 'videojs가 정의되지 않았습니다'?

Question

각도 2 프로젝트를 시스템 j에서 각도 cli로 변환합니다. 모든 js 및 CSS 파일을 index.html에서 제거하고 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 아래 코드는 직접 DOM에 액세스하는 경우 AfterViewInit하지 OnInit를 사용해야 닫는에게 )

2. 없습니다. (document.getElementById)

3. @types/videojs 정의를 설치해야합니다. 대신 videojs가 창 var에 있으므로 window["videojs"]()을 사용할 수 있습니다.

4. 난 그냥 당신이 한 정확하게, 다음 src/assets/js/video.min.js에 video.min.js을 추가 .angular-cli.json에 scripts에 "./assets/js/videojs/video.min.js"를 추가 않았다있다. 위의 작업을 수행 한 후에도 정상적으로 작동합니다.