My current challenge involves implementing the youtube iframe api for seamless video snippet display and control within an Angular 2 application. Maintaining TypeScript's type concept is crucial for both the webpack compiler and myself :).
A brief overview of my testing setup:
I utilized @angular/cli (Version 1.0.0-beta.32.3) to set up and install the ng2-youtube-player, followed by two minor adjustments:
ng new test002
cd test002
npm install ng2-youtube-player --save-dev
While the app.module was extended as per the instructions provided in ng2-youtube-player, I encountered a small correction and an error within the app.component:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',// renamed 'app' to 'app-root'
template: `
<youtube-player
[videoId]="id"
(ready)="savePlayer($event)"
(change)="onStateChange($event)"
></youtube-player>
`
})
export class AppComponent {
player: YT.Player;// Error: Cannot find namespace 'YT'
private id: string = 'qDuKsiwS5xw';
savePlayer (player) {
this.player = player;
console.log('player instance', player)
}
onStateChange(event){
console.log('player state', event.data);
}
}
To address the error, I created a youtube.d.ts file to fake the namespace:
// dummy namespace...
export as namespace YT;
export interface Player {
name: string;
length: number;
extras?: string[];
}
Following this adjustment, running ng serve resulted in successful webpack compilation without any errors, even though 'YT' remained unknown within the ng2-youtube-player package.
After thorough research online, my question remains: Can anyone provide me with a correct .d.ts file or guide me on how to create one?