Question

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

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下的代码缺少结算)
如果您直接访问dom，则应使用AfterViewInit而不是OnInit。（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。在完成上述操作后，它可以正常工作。

ERROR ReferenceError：角度cli中的'videojs未定义'？

1 个答案: