Angular使用@types/spotify-web-playback-sdk时出现Spotify未定义错误

核心原因 #

Spotify Web Playback SDK并非npm可直接导入的模块，仅通过CDN提供全局脚本。你安装的@types/spotify-web-playback-sdk仅为TypeScript提供类型提示，不会自动加载实际的SDK代码，导致运行时全局Spotify变量不存在。

解决方案 #

1. 确保加载Spotify SDK脚本 #

有两种可靠方式加载脚本：

方式一：静态加载（在index.html中添加）

在项目根目录的index.html中，<head>或<body>末尾添加CDN脚本标签，确保Angular应用代码执行前SDK已加载：

<script src="https://sdk.scdn.co/spotify-player.js"></script>

方式二：动态加载（组件内按需加载）

如果不想阻塞页面初始化，可在组件内动态注入脚本，确保加载完成后再初始化播放器：

async loadSpotifySDK(): Promise<void> {
  return new Promise((resolve, reject) => {
    // 已加载则直接返回
    if (window.Spotify) {
      resolve();
      return;
    }
    // 创建脚本标签
    const script = document.createElement('script');
    script.src = 'https://sdk.scdn.co/spotify-player.js';
    script.onload = () => resolve();
    script.onerror = () => reject(new Error('Spotify SDK加载失败'));
    document.body.appendChild(script);
  });
}

2. 正确处理类型与初始化 #

• 保留顶部的类型引用（无需import）：

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

• 修改createWebPlayer方法，确保SDK加载完成后再创建实例：

  spotifyPlayer: Spotify.Player | null = null;
  
  async createWebPlayer(accessToken: string) {
    // 先加载SDK
    await this.loadSpotifySDK();
    // 初始化播放器
    this.spotifyPlayer = new window.Spotify.Player({
      name: 'Angular Spotify播放器',
      getOAuthToken: (cb) => cb(accessToken),
      volume: 0.5
    });
  
    // 连接播放器并添加事件监听
    this.spotifyPlayer.connect();
    this.spotifyPlayer.addListener('ready', ({ device_id }) => {
      console.log('播放器已准备就绪，设备ID:', device_id);
    });
  }
  

3. 常见误区修正 #

• 不要尝试import * as Spotify from 'spotify-web-playback-sdk'：该SDK未发布为npm模块，此操作必然报错。
• 不要直接访问window.Spotify：必须确保脚本加载完成后再访问，否则会出现未定义错误。

内容的提问来源于stack exchange，提问作者danielms