Angular SSG开发中使用WebAMP出现ReferenceError: document is not defined问题求助

嘿，我太懂你现在的困扰了——在Angular SSG里折腾WebAMP的时候碰到ReferenceError: document is not defined，这坑我之前也踩过！核心问题其实很明确：SSG是在服务端生成静态页面的，服务端环境里根本没有浏览器才有的document对象，而你现在在组件的constructor里就调用了初始化WebAMP的方法，这时候服务端渲染阶段就会执行这段代码，自然就报错了。

你之前试的那些if判断没起作用，大概率是因为判断逻辑还是放在了服务端会执行的阶段，没等到浏览器端的合适时机。咱换个思路，用Angular的生命周期钩子来解决：

解决方案步骤： #

• 改用AfterViewInit生命周期钩子：这个钩子只会在组件的视图完全渲染完成后触发，而且只在浏览器端执行，服务端根本不会碰这部分代码，完美避开服务端没有document的问题。
• 调整你的组件代码，把WebAMP的初始化逻辑移到这个钩子里面，同时加上DOM元素存在的判断，避免找不到容器的情况。

修改后的代码如下：

import { NgOptimizedImage } from '@angular/common';
import { Component, DOCUMENT, Inject, AfterViewInit } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
import Webamp from 'webamp';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-main',
  imports: [RouterLink, RouterOutlet, NgOptimizedImage, CommonModule],
  templateUrl: './main.component.html',
  styleUrl: './main.component.css',
})
export class MainComponent implements AfterViewInit {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  // 组件视图完全渲染后才会执行这个方法，且仅在浏览器端
  ngAfterViewInit() {
    this.musicPlayer();
  }

  musicPlayer() {
    alert("the playerrrr"); // for testing
    const winampContainer = this.document.getElementById('winamp-container');
    // 先检查容器是否存在，避免null报错
    if (winampContainer) {
      const webamp = new Webamp({/* ... */});
      webamp.renderWhenReady(winampContainer as HTMLElement);
    }
  }
}

这样调整之后，SSG构建时服务端不会执行ngAfterViewInit里的代码，只有当页面在浏览器端加载完成、组件视图渲染好之后，才会初始化WebAMP，这时候document已经存在了，报错问题自然就解决啦！

内容来源于stack exchange