angular - Cum pot să fac ca @vimeo/player să funcționeze în proiectul meu Angular2/Typescript?

Întrebare:

Cum fac să funcționeze @vimeo/player în proiectul meu Angular2/Typescript (în special Ionic2)?

Descriere:

Încerc să fac ca playerul Vimeo să funcționeze cu Angular2/TypeScript.

npm install --save @vimeo/player

Conform documentației lor, biblioteca poate fi utilizată astfel:

Dacă folosești un modul de împachetare precum webpack sau rollup, obiectul exportat va fi constructorul Player (spre deosebire de browser, unde este atașat la window.Vimeo):

import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});

Ceea ce arată super promițător! Dar nu funcționează.

Ce am încercat:

Am instalat @vimeo/player și @types/vimeo__player. Am creat un component player în aplicația mea Ionic2.

player.ts:

import {Component, ViewChild} from '@angular/core';
import {NavController} from "ionic-angular/index";

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  @ViewChild('player_container') playerContainer;
  private player: Player;

  constructor(public navCtrl: NavController){}

  ngAfterViewInit() {
    // child is set
    this.player = new Player(this.playerContainer);
    console.log(Player);
  }

}

Folosesc view child, dar am încercat și cu ID-ul elementului.

player.html

<div #player_container></div>

Și primește următoarea eroare:

Neprins (în promisiune): TypeError: Trebuie să furnizați fie un element valid, fie un ID valid. Player@http://localhost:8100/build/main.js:102846:32 ngAfterViewInit@http://localhost:8100/build/main.js:74715:80 callProviderLifecycles@http://localhost:8100/build/main.js:11417:33 callElementProvidersLifecycles@http://localhost:8100/build/main.js:11392:35 callLifecycleHooksChildrenFirst@http://localhost:8100/build/main.js:11376:47 checkAndUpdateView@http://localhost:8100/build/main.js:12408:36 callWithDebugContext@http://localhost:8100/build/main.js:13462:47 detectChanges@http://localhost:8100/build/main. js:10474:81 _viewAttachToDOM@http://localhost:8100/build/main.js:43884:53 _transition@http://localhost:8100/build/main.js:43976:34 onInvoke@http://localhost:8100/build/main.js:4406:43 run@http://localhost:8100/build/polyfills.js:3:4146 http://localhost:8100/build/polyfills.js:3:13734 onInvokeTask@http://localhost:8100/build/main.js:4397:47 runTask@http://localhost:8100/build/polyfills.js:3:4841 o@http://localhost:8100/build/polyfills.js:3:1898 invoke@http://localhost:8100/build/polyfills.js:3:10674

După cum puteți vedea, se compilează, dar se blochează la rulare.

@types/vimeo__player Pur și simplu nu pare să fie terminat și nici măcar nu pare să fie observat când import @vimeo/player

Problema de pe GitHub referitoare la vimeo__player pare să arate că acest lucru este adevărat.

Se pare că rezolvarea modulului îl rezolvă corect ca modul JS, dar numai pentru că nu a găsit mai întâi tipurile. Ești sigur că ai inclus corect acele tipuri? --listFiles ți-ar arăta dacă este inclus.

Extras :

Problema a fost deschisă pe pagina playerului Github a Vimeo.

Răspuns #1

Problema dvs. nu este cauzată de @types/vimeo__player și nici nu este legată de sistemul/configurația dvs. de construire.

Definițiile de tip TypeScript nu afectează niciodată, niciodată, niciodată comportamentul la rulare. Chiar și erorile de la compilare nu au alt efect decât afișarea cu roșu în consolă, JavaScript-ul va fi încă generat.

Privind la urmărirea stivei pe care o ai, putem de asemenea să spunem că Player este efectiv importat și, din moment ce spui că nu există nicio eroare la compilare, totul este în regulă din punct de vedere al construirii.

De fapt, eroarea spune totul: TypeError: Trebuie să treceți fie un element valid, fie un id valid..

Player spune că se așteaptă la un HTMLElement.

Problema este că folosești @ViewChild() din Angular. Acest decorator va returna un înveliș atunci când faci interogarea pe un element nativ. Acest înveliș este de tip ElementRef și are o proprietate numită nativeElement care conține elementul original din DOM.

Deci, în loc să faci asta:

this.player = new Player(this.playerContainer);

Fă asta:

this.player = new Player(this.playerContainer.nativeElement);

Dar acum te-ai putea gândi "de ce TypeScript nu a generat o eroare de tip dacă nu trec un element nativ?". Aceasta este o întrebare bună, nu am suficiente date pentru a fi sigur, dar cred că importul tău poate fi incorect.

În loc de:

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";

Poți încerca să faci asta?

import { Player } from '@vimeo/player';

Privind fișierul .d.ts, se pare că Player este un export numit. Dar ai dreptate, definițiile de tip ale @vimeo/player sunt incomplete sau nu sunt sincronizate cu librăria JavaScript. Ar trebui să fii conștient de acest tip de probleme în TypeScript, deși acest lucru nu se întâmplă în fiecare zi ;)

Răspunsul #2

Pentru un proiect standard TypeScript, această declarație de import funcționează.

import * as Player from "@vimeo/player/dist/player.js";