Not Working With Angular SSR Version 17

[ahmedmohamedrashad01]

Dears,
The library was working on last version ok without SSR but now working only on the first element of the page and all the bottom elements got hidden from the page ,
could you please help me to solve this issue ,
Thanks.

[tehcmanmax]

Hi @ahmedmohamedrashad01 ,

I had the same issue.I have a solution for you:

document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    AOS.init();
  }
};

I explain in depth in this video

[DASMACHETE]

Hi,

both this workarounds fixed the issue:

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

ngAfterViewInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    this.ngZone.runOutsideAngular(() => {
      // Run code outside Angular zone
      if (this.document.readyState == 'complete') {
        console.log('doc loaded');
      }
      console.log('Page ready');
      AOS.init({ once: true, duration: 1000 });
      AOS.refresh();
    });
  }
}

or

constructor(@Inject(DOCUMENT) private document: Document) {}

ngAfterViewInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    this.document.addEventListener('DOMContentLoaded', () => {
      console.log('doc loaded');
      console.log('Page ready');
      AOS.init({ once: true, duration: 1000 });
      AOS.refresh();
    });
  }
}

Another thing you need to change is:

import * as AOS from 'aos';

to

import AOS from 'aos';

Than you can use it like this in OnInit or AfterViewinit:

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.document.addEventListener('DOMContentLoaded', () => {
        console.log('doc loaded');
        console.log('Page ready');
        AOS.init();
        AOS.refresh();
      });
    }
  }