Angular: "ReferenceError: Spotify is not defined" when using "@types/spotify-web-playback-sdk"

Question

I'm trying to use spotify's webplayer sdk in an angular project. I followed the steps given in this question and answer : Installing the types package, and then adding the types reference to the beginning of the file in which I'm using Spotify namespace

npm install --save @types/spotify-web-playback-sdk

and

///  <reference types="@types/spotify-web-playback-sdk"/>

as the first line in the file.

My code looks like this

//class variable
spotifyPlayer: Spotify.Player | null = null

and

createWebPlayer(){
    const accessToken = this.authObject.access_token
    this.spotifyPlayer = new Spotify.Player({ //line 107
      name: 'Web Playback SDK Quick Start Player',
      getOAuthToken: cb => {
        cb(accessToken)
      },
      volume: 0.5
    })

    //ready
    this.spotifyPlayer!.addListener('ready', ({ device_id }) => {
      console.log('Ready with Device ID', device_id);
    });
  
    // Not Ready
    this.spotifyPlayer!.addListener('not_ready', ({ device_id }) => {
      console.log('Device ID has gone offline', device_id);
    });
}

The compiler is fine with this, but when I call createWebPlayer() I get the error

ERROR ReferenceError: Spotify is not defined
    createWebPlayer home.component.ts:107

I'm calling the function manually and I'm doing it after I get an access token, so that shouldn't be a problem; I'm really stumped on this.

What I tried

I tried adding an import statement like so

import * as Spotify from 'spotify-web-playback-sdk'

But I get the error that it's not a module. The only installation I did was running

npm install --save @types/spotify-web-playback-sdk

I also tried switching line 107 to

this.spotifyPlayer = new window.Spotify.Player({

but that gave the similar error

ERROR ReferenceError: window.Spotify is not defined
    createWebPlayer home.component.ts:107

Again, I'm pretty stumped and I feel like I'm missing some obvious thing. Any help would be great!!

Answer 1

Ok so I fixed the problem (I think). From this angular project (github link) I found that I need to add the script to the html page. I guess the types file is just to not get type errors and doesn't actually link to the code?

The code I copied from that project is:

onst script = document.createElement('script');
script.src = 'https://sdk.scdn.co/spotify-player.js';
script.type = 'text/javascript';
script.addEventListener('load', (e) => {
  console.log(e);
});
document.head.appendChild(script);
window.onSpotifyWebPlaybackSDKReady = () => {
  console.log('The Web Playback SDK is ready. We have access to Spotify.Player');

My current code now looks like this:

createWebPlayerTwo () {
const script = document.createElement('script')
script.src = 'https://sdk.scdn.co/spotify-player.js'
script.type = 'text/javascript'
script.addEventListener('load', e => {
  console.log(e)
})
document.head.appendChild(script)
window.onSpotifyWebPlaybackSDKReady = () => {
  console.log(
    'The Web Playback SDK is ready. We have access to Spotify.Player'
  )
  const accessToken = this.authObject.access_token
  this.spotifyPlayer = new Spotify.Player({
    name: 'Web Playback SDK Quick Start Player',
    getOAuthToken: cb => {
      cb(accessToken)
    },
    volume: 0.5
  })

  this.spotifyPlayer.addListener('ready', ({ device_id }) => {
    console.log('Ready with Device ID', device_id)
  })

  this.spotifyPlayer.addListener('not_ready', ({ device_id }) => {
    console.log('Device ID has gone offline', device_id)
  })

  this.spotifyPlayer.addListener('initialization_error', ({ message }) => {
    console.error(message)
  })

  this.spotifyPlayer.addListener('authentication_error', ({ message }) => {
    console.error(message)
  })

  this.spotifyPlayer.addListener('account_error', ({ message }) => {
    console.error(message)
  })

  this.spotifyPlayer.connect()
  console.log('hi')
}

}

and it's working:)..

I'm getting the message "Ready with Device ID 13b20fd9..."