Prerender Error - document is not defined

[yalesnikov]

Hello, angular-dark-mode crashed building with prerender mode.

It's document is not defined error.

It'll be good to add condition to check is server or browser platform and run scripts only in the browser.

[talohana]

Thank you for pointing it out!
I'll look into it later today.

If you could share a reproduction in online editor or your own repo it would be much appreciated!

[talohana]

@yalesnikov

I have been looking into it, without prior knowledge of Angular Universal, does shimming with domino (as explained here) can help solving this?

[yalesnikov]

I wrote my custom dark-mode.service and that is example of my source code:

/*
  * Injecting Document is safe when used with server-side rendering
  * Injecting Platform id is to avoid error when SSR compile (there is not Local Storage on SSR)
  * */
  constructor(
    @Inject(DOCUMENT) private document: Document,
    @Inject(PLATFORM_ID) private platformId: object
  ) {
    if (isPlatformBrowser(this.platformId))
      this.getStateFromLocalStorage() ? this.document.body.classList.add('dark-mode') : null
  }

It works great for prerender mode on the Angular Universal.

You can use @Inject(DOCUMENT) for works with document, but for Local Storage you can don't use it on the server side.

[Takudzwamz]

Hi, I've tried the plugin it's now working with Angular Universal, can you please advise on what to do for it to work with Angular Universal.

[talohana]

Hi, @Takudzwamz could you please provide a reproduction? possibly with @yalesnikov advice.

[Takudzwamz]

Hi @talohana I followed what @yalesnikov suggested and I got it to work, thank you so much guys.