0

Importation d'un espace de noms dans le composant angulaire 2 me donne une erreur constructeurImportation d'un espace de noms dans le composant angulaire 2 me donne une erreur constructeur

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

Voici ma définition de composante angulaire, qui fait référence à cet espace de noms

J'ai également essayé d'utiliser le /// <reference path dans mon composant mais cela n'aide pas. Dans les outils chrome/développeur, j'obtiens l'erreur. Je suis capable de faire ng build ou ng serve et il construit/sert avec succès.

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(); 
    } 

} 

Voici mon fichier tsconfig.app.json et je l'aide de la DefinitelyTyped

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" 
    ] 
} 
+0

Vous ne devez pas importer YT.Player? Et je serais sûr d'essayer de trouver un paquet angulaire de lecteur youtube à installer pour rendre la vie plus facile. Avez-vous par exemple essayé https://github.com/orizens/ng2-youtube-player ??? Je n'ai pas utilisé cela moi-même. Mais j'essaierais toujours de faire le chemin de la moindre résistance! – JGFMK

Répondre

0

Juste importer la bibliothèque externe dans # script # tag de index.html résoudrait votre problème.

+0

Oui, j'ai commencé avec ça. Je pourrais passer à la version de script, mais je me demandais s'il y a une solution à ce problème si j'utilise la version de Typescript. –