I am encountering difficulties integrating vimeo/player.js into my angular-cli application. There isn't a supporting library for Angular 4, so I'm following the steps in the README.md under "Using with a module bundler".
I created a vimeo-player.component.ts:
import { Component, AfterViewInit, ViewChild} from '@angular/core';
import { Player } from '@vimeo/player';
@Component({
selector: 'app-vimeo-video-player',
templateUrl: './vimeo-player.component.html'
})
export class VimeoVideoComponent implements AfterViewInit {
@ViewChild('vimeoVideoContainer') vimeoVideoContainer;
public player: Player;
ngAfterViewInit() {
this.player = new Player(this.vimeoVideoContainer.nativeElement, {
id: 19231868,
width: 640
});
}
}
In vimeo-player.component.html:
<div id="vimeoVideoContainer"></div>
I want to use it within another template's component. For example, in my.component.ts's template:
<app-vimeo-video-player></app-vimeo-video-player>
Despite successfully using ngAfterViewInit, I'm getting an error saying "Cannot read property 'nativeElement' of undefined." This problem persists even if I set a timeout before initializing new Player().
I came across a similar issue on vimeo/player.js issues, but their solutions didn't work for me.
EDIT 1:
With help from @peinearydevelopment, I resolved the previous error, but now I'm facing a new one: "ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1__vimeo_player__.Player is not a constructor."
What could be causing this error? How can I resolve it?