Implementé AOS - Animate on scroll library en mi proyecto para manejar las animaciones. Pero a medida que convierto mi proyecto Angular en Angular universal. El error comienza a aparecer.
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)No pude localizar el documento que no está definido por el error.
Por favor, si alguien pudiera iluminarlo.
Así es como implementé AOS en el componente:
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 }); } }No estoy seguro de si hay una advertencia y solo una solución alternativa, pero puedo evitar el error envolviéndolo con Angular "isPlatformBrowser" de @angular/common.
Aquí está la solución:
1 importar PLATFORM_ID desde '@angular/core'
import { ..., PLATFORM_ID } from '@angular/core';2 Inyecte en el constructor de componentes donde debe iniciar el AOS
constructor(..., @Inject(PLATFORM_ID) private platformId: Object)3 Envuelva AOS.init con esta instrucción if:
if (isPlatformBrowser(this.platformId)) { AOS.init({ once: true, duration: 1000 }); })