Angular 7: использовать внешний скрипт в компоненте

#angular #typescript #twitch

#angular #typescript #Twitch

Вопрос:

Я пытаюсь использовать Twitch API для встраивания канала в мое веб-приложение.

Инструкции следующие:

 <html>
  <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat"
      });
    </script>
  </body>
</html>

Я включил https://embed.twitch.tv/embed/v1.js файл в свою assets папку и файл angular.json.

     "scripts": [
      "src/assets/twitch/twitch-embed-v1.js"
    ]

Мои файлы компонентов выглядят следующим образом:

 import Twitch from '../../../../../assets/twitch/twitch-embed-v1';

export class TwitchPlayerComponent implements OnInit {

  ngOnInit() {
    const options = {
      width: 854,
      height: 480,
      channel: '424976424',
    };
    const player = new Twitch.Embed('twitch-embed', options);
    player.setVolume(0.5);
  }

}

Скрипт отображается на панели «Мои исходные тексты» в Chrome devtools, но выдается следующая ошибка:

Embed is not a constructor

Что мешает правильному использованию скрипта?

Ответ №1:

Версия twitch v1 еще не содержит типизаций на TypeScript, это появится во v2. Вы не должны добавлять скрипты в свою папку assets. Что, если есть обновление от twitch? Вам придется обновить папку assets вручную.

В любом случае, я думаю, чтобы использовать twitch SDK, вы можете сделать следующее:

 npm install twitch-js@next

И в вашем TS:

 import * as Twitch from 'twitch-js';

new Twitch.Embed({...});

1. Есть ли у вас рабочий stackblitz или код? Это был мой оригинальный подход, но приводит к той же ошибке. Я полагал, что перенос скрипта внутрь приведет к устранению переменных, а не к сохранению его таким образом в долгосрочной перспективе.

Ответ №2:

Я столкнулся с той же проблемой, и именно поэтому я решил реализовать оболочку Typescript для интерактивного встроенного проигрывателя Twitch. Это на 100% совместимо с Angular, поэтому, если вам все еще нужен способ добиться этого, пожалуйста, ознакомьтесь с этим репозиторием. Надеюсь, это поможет ^^

https://github.com/frozencure/twitch-player