How do I use "window.Twitch.ext" in angular for using the Configuration Service?

Extensions
1

I tried as follows but getting error.

image
image1023Ă—199 15.6 KB

I have added the script
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
to my index.html file and in the browser console I can access all the twitch methods but it is not available in code.

2

The JS Helper script added before your script is in the HTML tree?

If this doesn’t work then this suggests onAuthorized is also not working and thats required for an extension to complete loading and be permitted to be visible.

You also don’t need to cast it to const twitch should be able to use window.Twitch.ext.onContext directly, additionally window.Twitch.ext.onContext is not for the config service it’s for channel/video update data.

Extension config is loaded via window.Twitch.ext.configuration.onChanged

3

This is my index.html

image
image1029Ă—374 34 KB

I am not able to access window.Twitch.ext via code, however it is accessible in the browser console.

4

It should be in the <head> and be the FIRST script before any others

This HTML doens’t seem to call your application JSON either

5

I tried adding it to the Head as well, but got the same error.
I am Trying to access from a component in the project.

6

Adding the script to the index.html should make it accessible globally right? i.e. to all the routes and components.

7

That would suggest your code (or angular itself) is doing something to mess with the window globals for some reason.

So seems like an angular problem rather than a regular issue.

Also check in network tools if the JS Helper is actually succesfully loading.

8

Yes, extn-utils.js is loading successfully.

9

Except it’s twitch-ext.min.js not extn-utils.js

10

It’s loading fine as well.

11

This raises the question of what extn-utils.js is and is doing then

12

It is loading because of Adobe Acrobat extension in chrome.

13

This code is also in the clientSide code and note serverSide code. Theres no window server side

14

Could you please clarify? I didn’t understand what you mean by that.

15

is the code trying to call window.Twitch in clientSide browser code

Or is it somewhere in the server side code and it’s not contextuall in the browser

You say you are trying to access the config service, if you are doing this “in a server” then you need to call the API not the JS helper. So I’m wondering if this code is contextually in the wrong place

16

It is called on the Client side.

17

I’m out of ideas then until someone knowledgable about angular pokes their head in.

18

Thank you for your help @BarryCarlyon .
I will continue to look further into it.

19

What you see happening here is the typescript compiler yelling at you since it doesn’t know that the twitch property is added dynamically when the script is loaded.

Edit: it seems that there is a type package on npm for this @types/twitch-ext - npm

To make this work you can do two things.

  1. // @ts-ignore it
  2. use the array property access syntax to access it, this will just drop all errors since ts will know it’s a dynamic prop. That would look something like window['Twitch'].ext
2 Likes
20

To keep It in line with Angular way of things, you can create a new Subject in RxJS and use the TwitchAPI events for your subscriptions. In VueJS I created a Reactive value that handles all about Authentication on Twitch. I’d do the same for Angular in the form of a RxJS Observable. It’s really not that hard. Just listen to the Events from the API.

1 Like