Angular ReferenceError: document is not defined

Note my knowledge of JS frameworks and TS is essentially non-existent.

I'm trying to create an SPA with SSG. I have a main component I'm trying to display a webAMP in. Which needs to access document. Right now I have the code to create a webAMP object in the main-component.ts. But it's throwing this error:

ReferenceError: document is not defined
at eval (eval at runInlinedModule (file:.../node_modules/vite/dist/node/module-runner.js:1062:11), <anonymous>:19481:10)
at async ESModulesEvaluator.runInlinedModule (file:.../node_modules/vite/dist/node/module-runner.js:1062:5)
at async SSRCompatModuleRunner.directRequest (file:.../node_modules/vite/dist/node/module-runner.js:1284:61)
at async SSRCompatModuleRunner.directRequest (file:.../node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:25274:23)
at async SSRCompatModuleRunner.cachedRequest (file:.../node_modules/vite/dist/node/module-runner.js:1180:76)


I think I've tried these but found no progress:

• https://stackoverflow.com/a/60636562/30935374
• using if statement https://stackoverflow.com/a/78444345
• https://github.com/themesberg/flowbite/issues/769#issuecomment-1940864715
• https://stackoverflow.com/a/76777531

current main.component.ts :

import { NgOptimizedImage } from '@angular/common';
import { Component, DOCUMENT, Inject} 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{


constructor(@Inject(DOCUMENT) private document: Document) {
this.musicPlayer();

}


musicPlayer(){
alert("the playerrrr");//for testing

const webamp = new Webamp({
});


webamp.renderWhenReady(this.document.getElementById('winamp-container') as HTMLElement);

}

}
}

Continue reading...