Issue on Server Side Rendering

[shreyas-1997]

hello Sir! I have Developed a website in angular using gsap for the animations and much more and also it's work properly on CSR(Client Side Rendering).But i want to Rendered this app on SSR(Server Side Rendering) because of SEO purpose..for that i used angular universal .After using angular universal i am facing one issue i.e.. (intermediate value)(intermediate value).getBoundingClientRect is not a function. Here is the screenshot of the error

I am getting this error only on SSR by using angular universal. Please guide or help me to fix this issue because i am working around since 2 weeks basically it is coming from gsap packages .if i removed that package then its works fine as expected but when reused that plugin than it's through the error (intermediate value)(intermediate value).getBoundingClientRect is not a function

Here is my project Repositary:-https://github.com/shreyas-1997/Angular-Development

Thank you so much! I hope i will get solution here asap..

[Robak08]

Since I haven't used Angular at all I can only try to point You in right direction. You might want to initiate (import) plugin only after DOM is created - lifecycle method might be ngOnInit() for Angular. Ex. in Svelte u can use onMount lifecycle. Hope this helps.

[shreyas-1997]

Thanks dude i will definelty try this but actually i am callling that function on wheelevent and in that function Tweenmax is used when i comment it than it works fine but when i uncomment than same issue .. i just want to say it not only the matter of import but also function

[ZachSaucier]

Hey Shreyas. As Robak08 said, it's best to make sure that GSAP only runs when a client process (browser) is available.

First things first though: There's no reason to import TweenMax, Power2, or TimelineMax into your project. Just use the GSAP 3 formatting in which case all you need to import is gsap. For more info about that, see the GSAP 3 migration guide.

To make sure that the GSAP doesn't run when there's no client process, it looks like Angular Universal has a isPlatformBrowser method that you can use as this article covers. I think you use it like so:

import { isPlatformBrowser } from '@angular/common';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; // Whatever plugin(s) you need import this way

// ...

if (isPlatformBrowser(this.platformID)) { // Make sure the client process exists before registering and using
  gsap.registerPlugin(ScrollTrigger);
  // ...
}

[shreyas-1997]

Hey ZachSaucier Thanks for your help but i am calling the mousewheel event form html to component see the line no 25 and the function n type script is on line number 628

Then can you please help .how can integrate this

[shreyas-1997]

i am getting this error at the time of import gsap and i amusinf gsap 2 because some the functionality not works on gsap 3

[ZachSaucier]

It looks like you're loading the old version of GSAP. Uninstall it and simply install gsap:

npm install gsap

[shreyas-1997]

i know i am using old version but some of the functionality of gsap2 is not working on gsap 3 thats why i am not using gsap3 Is it possible to do change in gsap2

[ZachSaucier]

some of the functionality of gsap2 is not working on gsap 3

What functionality is that?

GSAP 3 has a smaller file size, a sleeker API, and a bunch of new features. Why would you want to continue using the old version?

[shreyas-1997]

I installed to the gsap 3 but how can i add that function in isplatform browser because i am calling that function on wheelevent

[ZachSaucier]

It's just a method so you can use that if statement anywhere to my knowledge. But I've never used Angular Universe before so perhaps that's not true.

Regardless this issue is not an issue with GSAP and you haven't provided a way for us to test anything so we can only do so much in helping.

[shreyas-1997]

see this after installing gsap 3 as per you said i imported this way import { gsap} from "gsap"; import { isPlatformBrowser, isPlatformServer } from '@angular/common'; import { TweenMax,Power2 } from "gsap/TweenMax";

[ZachSaucier]

Please go through the GSAP installation docs.

[shreyas-1997]

https://github.com/shreyas-1997/Angular-Development you can check it from here code if you want

[ZachSaucier]

Sorry, we do not have the capacity to debug entire projects like that for free. See this post for how to create a minimal demo.

[shreyas-1997]

Ohk Thanks for your support