Angular ReferenceError: документ не определяется ⇐ Javascript

[Anonymous]

ПРИМЕЧАНИЕ. Мои знания о рамках JS и TS, по сути, отсутствуют. У меня есть основной компонент, в котором я пытаюсь отобразить Webamp. К которому нужно получить доступ к документу. Прямо сейчас у меня есть код для создания объекта WebAmp в Main-Component.ts . Но это бросает эту ошибку: < /p>
ReferenceError: document is not defined
at eval (eval at runInlinedModule (file:.../node_modules/vite/dist/node/module-runner.js11), 10)
at async ESModulesEvaluator.runInlinedModule (file:.../node_modules/vite/dist/node/module-runner.js5)
at async SSRCompatModuleRunner.directRequest (file:.../node_modules/vite/dist/node/module-runner.js61)
at async SSRCompatModuleRunner.directRequest (file:.../node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js23)
at async SSRCompatModuleRunner.cachedRequest (file:.../node_modules/vite/dist/node/module-runner.js76)
< /code>
Я думаю, что я пробовал это, но не нашел никакого прогресса: < /p>

• Angular 9 SSR - Ссылкаерр: документ не определен - переполнение стека < /li>
  Использование. Документ не определен - GitHub
• Угловая ошибка SSR: документ не определен - Stack Overflow

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);
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... ot-defined