Импорт пространства имен в Angular 2 дает мне ошибку конструктора

Импорт пространства имен в Angular 2 дает мне ошибку конструктора

ERROR Error: Uncaught (in promise): TypeError: YT.Player is not a constructor
TypeError: YT.Player is not a constructor

Вот мое определение углового компонента, которое ссылается на это пространство имен

Я также пытался использовать /// <reference path в моем компоненте, но это не помогает. В инструментах chrome / developer я получаю ошибку. Я умею делать ng build или же ng serve и он успешно строит / обслуживает.

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.css']

})

export class VideoComponent implements OnInit {

  private id: string = 'qDuKsiwS5xw';
  p: YT.Player;
  done = false;


  constructor() {

    this.p = new YT.Player('player', {
        height: 390,
        width: 640,
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': this.onPlayerReady,
            'onStateChange': this.onStateChange
        }
    });
  }

  ngOnInit() {

  }

  onStateChange(event) {
    console.log('player state', event.data);
  }
  // 4. The API will call this function when the video player is ready.
  onPlayerReady(event) {
    event.target.playVideo();
  }
  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !this.done) {
      setTimeout(this.stopVideo, 6000);
      this.done = true;
    }
  }

  stopVideo() {
    this.p.stopVideo();
  }

}

Вот мой файл tsconfig.app.json, и я использую DefinitiveTyped

http://definitelytyped.org/docs/youtube--youtube/classes/yt.player.html

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": ["youtube"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}
Источник

2 ответа

Решение

Просто импортируйте внешнюю библиотеку в тег #script# index.html, чтобы решить вашу проблему.

Источник

Вы должны использовать YouTube плеер ng2: https://www.npmjs.com/package/ng2-youtube-player

Источник
Другие вопросы по тегам