Angular how can I use embed script in Component

Question

I'm trying to set up in Angular a way of only showing Twitch player if the stream is online, so in the Documentation there is this inline HTML:

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    video: "<video ID>",
    collection: "<collection ID>",
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

Of course though in Angular Components we can't use < script > tags and I don't think it's currently possible to use require or import to use this in my components TypeScript.

So how would I go about adding this functionality? I understand what to do after I can actually reference that script tag.

why don't you include the script in "scripts" in angular.json? — Michael Kang, Dec 02 '18 at 06:14

score 5 · Accepted Answer · edited Oct 03 '20 at 17:08

You can create a script tag dynamically, but I think it's easier to just download the script and put it in assets folder and then add the script to script list in angular.json

or you can add the script to index.html head section

index.html

<head>
    <script src= "https://player.twitch.tv/js/embed/v1.js"></script>
    ...
</head>

add this to component ngOninit method

      ngOnInit() {
        var options = {
            width: <width>,
            height: <height>,
            channel: "<channel ID>",
            video: "<video ID>",
            collection: "<collection ID>",
          };
          var player = new Twitch.Player("<player div ID>", options);
          player.setVolume(0.5);
       }

Component template

    <div id="<player div ID>"></div>

You may find another solution like angular package for twitch can be more cleaner way

Updated

typescript will give an error like [ts] Cannot find name 'Twitch'. [2304] some library has type definition files but in our case if you use Twitch object in this file only you can add this statement to tell typescript about the Twitch object

declare const Twitch: any;

if you want to use Twitch on multiple components

src/global.d.ts

 declare const Twitch: any;

final recommendation

install npm i twitch-js and import Twitch object like this

import Twitch from 'twitch-js'

this will be bundled by webpack, so you don't need to add any script tag in the html.

twitch-devs

The second doesn't work it still says 'Cannot find name 'Twitch'' — Daniel Turcich, Dec 02 '18 at 16:42
The first way also doesn't seem to do anything either it still says the same as the above comment :/ — Daniel Turcich, Dec 02 '18 at 16:44
@DanielTurcich sorry forgot to mention `declare const Twitch: any` — Muhammed Albarmavi, Dec 03 '18 at 06:57
I'm getting `ERROR TypeError: Twitch.Player is not a constructor` when i include it in the head, or download/include it — Matt Westlake, Apr 13 '19 at 17:29

score 1 · Answer 2 · edited Sep 22 '20 at 12:42

Struggled with this for a while. My script was asynchronous, and eventually I discovered postscribe package. Works like magic.

npm install --save postscribe

In the code:

import postscribe from 'postscribe'

//The script you want to load
const script = '<script src="https://darksky.net/map-embed/@radar,41.88,-87.62,10.js?embed=true&timeControl=false&fieldControl=false&defaultField=radar"></script>';

postscribe('#yourDivName', script);

score 1 · Answer 3 · answered Nov 02 '20 at 14:21

This is how I made it work:

Copy everything from Twitch JS URL.
Create file twitch.js in your assets folder and paste everything. ( src/assets/scripts/twitch.js ).
In your component add import Twitch from 'src/assets/scripts/twitch.js'.
Also in your component add the twitch init code

Your component should look like this:

import { Component, OnInit } from '@angular/core';
import Twitch from 'src/assets/scripts/twitch.js';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  embedTwitch! : any;
  
  constructor() { }

  ngOnInit() {
    this.embedTwitch = new Twitch.Embed("twitch-embed", {
      width: 854,
      height: 480,
      channel: "monstercat"
    });
  }

}

Your component html must have twitch placeholder <div id="twitch-embed"></div>
Open your app and enjoy :)

yooloobooy · Answer 4 · 2020-10-03T18:29:40.250

Manually download the v1.js script from https://embed.twitch.tv/embed/v1.js
Create new folder src/twitch/ and add the v1.js script to it
Add "src/twitch/v1.js" to the scripts array in angular.json
Create a new file twitch.d.ts in src/twitch/
Add declare const Twitch: any; to twitch.d.ts

The Twitch library can now be used anywhere without importing any module like so:

ngOnInit(): void {
  new Twitch.Embed('containerId', {
    channel: 'asmongold',
    height: 500,
    width: 400,
 });
}

Angular how can I use embed script in Component

4 Answers4

Linked