Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

247
Vistas
Initialise AOS - Animate on scroll library in Angular Universal Server Side Rendering

I've implemented AOS - Animate on scroll library into my project to deal with the animations. But as I convert my Angular project into Angular universal. Error start popping.

ERROR ReferenceError: document is not defined
    at n (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:16908:14433)
    at Object._ [as init] (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:16908:1386)
    at AppComponent.ngOnInit (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:106:42)
    at callHook (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:149051:22)
    at callHooks (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:149020:17)
    at executeInitAndCheckHooks (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:148971:9)
    at refreshView (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:156008:21)
    at renderComponentOrTemplate (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:156107:9)
    at tickRootContext (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:157338:9)
    at detectChangesInRootView (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:157363:5)

I could not locate the document that is not defined by the error.

Please if someone could shine the light to it.

Here is how I implemented AOS into the component:

import { Component, OnInit } from '@angular/core';
import { SeoService } from './core/services/seo.service';
// 🚨 TODO: FIX AOS for angular universal
import * as AOS from 'aos';
@Component({
  selector: 'rvi-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(private seo: SeoService) {}

  ngOnInit() {
    this.seo.initDefaultMetaTags();
    // ERROR ReferenceError: document is not defined
    // 🚨 TODO: fix this!!
    AOS.init({ once: true, duration: 1000 });
  }
}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I'm not sure if there is a caveat and just a workaround, but I'm able to bypass the error by wrapping it with Angular "isPlatformBrowser" from @angular/common.

Here is the solution:

1 import PLATFORM_ID from '@angular/core'

import { ..., PLATFORM_ID } from '@angular/core';

2 Inject in the component constructor where you have to init the AOS

constructor(..., @Inject(PLATFORM_ID) private platformId: Object)

3 Wrap the AOS.init with this if statement:

if (isPlatformBrowser(this.platformId)) { AOS.init({ once: true, duration: 1000 }); })
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda