vimeo/player.js - Cannot read property 'nativeElement' of undefined

Question

as stated in the title, I'm having some troubles trying to integrate vimeo/player.js in my angular-cli application.

Since I haven't found any supporting library for angular 4, I'm following the steps in the README.md at Using with a module bundler.

I built 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, // Generic Id
        width: 640
    });
  }

}

Where vimeo-player.component.html:

<div id="vimeoVideoContainer"></div>

And I'm trying to use it inside another template's component. For instance inside my.component.ts's template I have:

<app-vimeo-video-player></app-vimeo-video-player>

I'm getting Cannot read property 'nativeElement' of undefined even thought I managed to use ngAfterViewInit. Same thing happens if I set a timeout before triggering new Player()....

I found this issue on vimeo/player.js issues but it didn't help me.

EDIT 1:

With @peinearydevelopment I solved this particular error but now I'm getting: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1__vimeo_player__.Player is not a constructor.

What Am I doing wrong? How can I fix this?

Answer 1

Change your div to: <div #vimeoVideoContainer></div>

While I can't find great documentation, here is the ViewChild documentation. There are a number of different places in their documentation where they use this with different selector types. As you can see from the documentation, it would accept a Type which doesn't seem applicable here as you aren't selecting a custom component. The above syntax is what I've seen most commonly when using a string to select an element.

About your second Edit, try importing Player as follows import * as Player from '@vimeo/player/dist/player.js';