Error using [email protected] in Angular 17 - document is not defined

Question

I'm trying to use LottieFiles with [email protected] and Angular 17. It always gives me an error.

[vite] Internal server error: document is not defined

This is my app.config.server.ts

import {
  mergeApplicationConfig,
  ApplicationConfig,
  importProvidersFrom,
} from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import { LottieServerModule } from 'ngx-lottie/server';


const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    importProvidersFrom(
      LottieServerModule.forRoot({
        preloadAnimations: {
          folder: 'src/assets',
          animations: ['animation_lo4pd2il.json'],
        },
      })
    ),
  ],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

this is my home.component.ts

import { Component} from '@angular/core';
import {
  LottieComponent,
  AnimationOptions,
  LottieTransferState,
} from 'ngx-lottie';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [LottieComponent],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  options: AnimationOptions = {
    animationData: this.lottieTransferState.get('animation_lo4pd2il.json'),
  };

  constructor(private lottieTransferState: LottieTransferState) {}
}

and on home.component.html only have that line

<div class="animation-container">
      <ng-lottie [options]="options"></ng-lottie>
</div>