Angular: Cannot find namespace “Spotify” when using @types/spotify-web-playback-sdk

Question

I'm trying to use https://www.npmjs.com/package/@types/spotify-web-playback-sdk in my angular project to type out the spotify player in one of my components. I Installed the types, as instructed...

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

The Visual Studio code linter doesn't complain when I define this class variable and type it to a SpotifyPlayer...

// class variable
spotifyPlayer: Spotify.SpotifyPlayer;

But, when I go to build my code, I get this error...

ERROR in src/app/components/header/header.component.ts:32:18 - error TS2503: Cannot find namespace 'Spotify'.

32   spotifyPlayer: Spotify.SpotifyPlayer;

I'm using...

Angular CLI: 9.1.0
Node: 10.15.1
OS: win32 x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.0
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.8.3
webpack                           4.42.0

Appreciate the help!

Answer 1

As per the type definition here spotify-web-playback-sdk is non-npm package . As per the Spotify documentation here , you would be adding the JS bundle in your html directly, which means this Script is not loaded as a module .

From DefinitelyTyped

You may need to add a types reference if you're not using modules

You can add the below line to top of the file where you are using Spotify namespace and the error should disappear.

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

More information is here and here . Whenever Spotify publishes a npm library prefer using that instead.

Answer 2

You'll have to import the namespace in every class eg import * as Spotify from 'Spotify'