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!
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.