youtube.d.ts File for the youtube-iframe-api to use in Angular 2 needed

Question

I try to use the youtube iframe api for showing and controling video snippets with a smooth angular2 integration. And respecting the type concept of typescript is important to the webpack compiler and me :).

The quick setup of my tests:

use @angular/cli (Version 1.0.0-beta.32.3) to setup and install the ng2-youtube-player and then two small adjustments:

ng new test002
cd test002
npm install ng2-youtube-player --save-dev

The app.module was extended according to ng2-youtube-player, but in the app.component I had a small correction and an error:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',// app renamed 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);
  }
}

For the error I faked the namespace with a youtube.d.ts file:

// dummy namespace...
export as namespace YT;

export interface Player {
    name: string;
    length: number;
    extras?: string[];
}

Now using ng serve the webpack is compiling without error, even if there is YT unknown within the ng2-youtube-player package.

My question after intensive search on the internet: Can someone may provide a correct .d.ts file or tell me how to find out?

Joline

Answer 1

This installs the TypeScript types for the YouTube iframe:

Using Yarn:

yarn add @types/youtube

Or NPM:

npm install @types/youtube

As @TaeKwonJoe points out below, with @types/youtube installed, add the following to your project tsconfig.json under compilerOptions:

"typeRoots": [
    "node_modules/@types"
],
"types": [ "youtube" ]

Spermicide

The YT namespace is defined by the @types/youtube package, what I've searched for, Thanks. The youtube package contains a different interface specially to upload youtube videos (if I read the node_modules/youtube/lib/youtube.js right...). – Joline

For me just installing this package to the devDependencies worked. Maybe because it's 2022 right now and types in node_modules/@types are automatically used. – Mythical

Answer 2

As @Myonara stated, the accepted answer involved importing a youtube upload library which is extraneous to the actual solution.

Better yet:

1. Omit the npm youtube package from node_modules and package.json
2. Remove the line import 'youtube';
3. With @types/youtube installed, add the following to your project tsconfig.json under compilerOptions:

"typeRoots": [ "node_modules/@types" ], "types": [ "youtube" ]

The YT namespace will now be available.

playerStateChange(e) {
    switch (e.data) {
        case YT.PlayerState.PLAYING:
            console.debug('youtube playing');
            break;
        case YT.PlayerState.PAUSED:
            console.debug('youtube paused');
            break;
        case YT.PlayerState.ENDED:
            console.debug('youtube ended');
            break;
    }
}

Isochronism

thanks for sharing! in step 3, in stead of add to files array, you can also just add youtube to the types array in tsconfig.json – Begrudge

This gives me ERROR in No NgModule metadata found for 'AppModule :-/ – Omer

@Omer have you installed youtube types? e.g. npm install --save-dev @types/youtube – Isochronism

Answer 3

I've been struggling with this and trying a bunch of things. In the end adding youtube to types in tsconfig.app.json which fixed it.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["youtube"]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

The only other thing I did was:

npm install @types/youtube

This allows me to freely use new YT.Player(...) without any other tricks (such as just calling window['YT'] which I've seen.

If anybody can offer an explanation as to how my IDE (VS Code) can find it but the compiler can't I'm still curious!.

Omer

Answer 4

/// <reference types="youtube" />

On the top of the file where you use YT namespace.

Suavity

Answer 5

Actually, ng2-youtube-player provides its own TypeScript definitions, which is nice. You can see them under node_modules/ng2-youtube-player/ng2-youtube-player.d.ts.

To use them, do something like this:

import { YoutubePlayer, YoutubePlayerService } from 'ng2-youtube-player';

And in your component class (assuming of course you know how to use Zone):

@ViewChild('myElement') ref: ElementRef;
service: YoutubePlayerService = new YoutubePlayerService(this.someZone);
player: YoutubePlayer = new YoutubePlayer(this.service, this.ref);

Spermicide

oh, yes, node_modules/ng2-youtube-player/ng2-youtube-player.d.ts is in the npm package and not in the github project for whatever reason. But it doesn't declare the YT stuff, which is in the example and the plugin doesn't provide the full parameter list to the player itself as described in the youtube iframe api Thanks for mention the d.ts file in the package. – Joline

What are the "YT stuff", exactly? Which specific classes/types are you missing? Because the Player class you're referring to is almost certainly the declared YoutubePlayer. – Spermicide

Afaik is the symbol YT generated on DOM-root level by the script from https://www.youtube.com/iframe_api as described in this original documentation from Google. The declared youtube player has only a subset of functionality, that's the reason I want to have the YT.d.ts file... – Joline

Okay, so I didn't realise you were actually looking for typings of the Youtube library itself. I don't think that was obvious from your post. – Spermicide

Actually, I just spent a minute looking at ng2-youtube-player and it simply wraps the API, so YT.Player becomes YoutubePlayer. Which missing functionality are you looking for? – Spermicide

I want to pass start/startSeconds or end/endSeconds as parameters, which I can already do in the iframe itself. Additionally I need the callback for the statusChange, in that I want to request the current position when it was paused or stopped. Potentially I have to code it in "pure" html/javascript first before I try an angular2 compliant way... – Joline