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!

GSSwain · Accepted Answer · 2020-04-05 10:59:47Z

5

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.

answered Apr 5, 2020 at 10:59

GSSwain

6,2032 gold badges23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aelagawy · Accepted Answer · 2020-04-05 08:02:59Z

-1

You'll have to import the namespace in every class e.g. import * as Spotify from 'Spotify'

answered Apr 5, 2020 at 8:02

aelagawy

5875 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related