Angular ReferenceError: document is not defined

Question

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:

Angular 9 SSR - ReferenceError: document is not defined - Stack Overflow
using if statement How to fix Document is not defined - Stack Overflow
flowbite issue #796 - Angular 17 SSR: ReferenceError: document is not defined - GitHub
Angular SSR error: document is not defined - 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);
  }
}
}

"I'm trying to create an SPA with SSG" that's a contradiction. If it's a static site, it's not a SPA... — Jared Smith
– Jared Smith, Commented Jul 1 at 17:26

Naren Murali · Accepted Answer · 2025-07-01 07:54:44Z

1

The document object does not exist on the server, so you will be getting this error. To handle this on the HTML, use the @defer to render a certain HTML block only on the browser. The @defer works only on the browser when defined with basic configuration.

@defer() {
  <app-some-component/>
}

When working with typescript code, we can use the afterNextRender hook, to execute logic only on the browser.

constructor(@Inject(DOCUMENT) private document: Document) {
  afterNextRender(() => {
    this.musicPlayer();
  });
}

answered Jul 1 at 7:54

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user30935374 Sep 19 at 5:45

I've implemented this and still face the issue, what am I doing wrong and what should I look into to fix it?

user30935374 Sep 19 at 8:05

it does seem to work when I try using document for other tests but not when initializing webamp (WITHOUT rendering it). For one I didn't think initializing it accessed document and for two if it did shouldn't it still not cause this error?

user30935374 · Accepted Answer · 2025-09-20 05:21:38Z

0

Along with the correct answer, I found I needed to conditionally import webamp, that's it.

answered Sep 20 at 5:21

user30935374

135 bronze badges

Collectives™ on Stack Overflow

Angular ReferenceError: document is not defined

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related