5

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?

5 Answers 5

15
+50

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" ]
2
  • 1
    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...).
    – Myonara
    Mar 1, 2017 at 19:20
  • 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.
    – vdegenne
    Jun 14, 2022 at 9:12
4

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;
    }
}
3
  • 1
    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 Nov 8, 2017 at 20:00
  • This gives me ERROR in No NgModule metadata found for 'AppModule :-/ Jun 2, 2018 at 19:56
  • @Simon_Weaver have you installed youtube types? e.g. npm install --save-dev @types/youtube
    – TaeKwonJoe
    Jun 5, 2018 at 17:36
1

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!.

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

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

-1

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);
6
  • 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.
    – Myonara
    Feb 28, 2017 at 18:08
  • 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. Mar 1, 2017 at 5:15
  • 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...
    – Myonara
    Mar 1, 2017 at 6:19
  • 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. Mar 1, 2017 at 7:59
  • 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? Mar 1, 2017 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.