Is there a definative working solution for Angular SSR and GSAP3

[ADigital]

Kia ora, 
A fully working angular SSR Project is having trouble since installing GSAP3 via NPM,  There are lots of old threads that are hanging arround and we have followed instructions for npm install in the docs - its breaking the build, is there a fully working tested solution for building Angular 8/9 Universal SSR with GSAP3?

Thank you

[GreenSock]

I'm not an Angular guy, but I do know that GSAP 3 should be a much cleaner install. It's all standard ES Modules now, so no fancy workarounds are needed. I'm pretty sure you don't have to do anything special to install GSAP or get it running - the only caveat would be that you not run code that targets DOM elements before the document/window exists. 

 

If you're running into trouble, please provide a minimal demo so that we can see what's breaking in your environment. Maybe either a Github repo link or a stackblitz.com or codesandbox.io?

[GreenSock]

In case it helps, here's a super quick demo: 

https://stackblitz.com/edit/angular-ivy-2axvvy?file=src%2Fapp%2Fapp.component.ts

[ADigital]

Thanks for that! 
The build is working but when i run serve:ssr the issue being thrown up is arround the way gsap imports internaly in the NPM repo:
 

D:\Desktop\RepoPath\node_modules\gsap\all.js:1
import gsap from "./gsap-core.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module

Any Clues? Feels ES related but not really my knowledge area.

Cheers Jack

PS: I have been a greensock member since you first made club greensock (and using it from long before that - id guess we are nearly 16years+ of gsap now and i could not live without it, allthough i miss Actionscript lol). Many thanks!

 

[GreenSock]

43 minutes ago, ADigital said:

SyntaxError: Cannot use import statement outside a module

That definitely sounds like an issue in your build system, like it isn't able to handle ES modules and it's expecting things to be transpiled at that point. I wish I could help with your build system, but that's not in my wheelhouse. I'm 99.9% sure this has nothing to do with GSAP, though. 

 

Two possible hints:

1. Try importing the ES5 files (from /dist/) because those aren't ES Modules. So, for examples, import { gsap } from "gsap/dist/gsap"; instead of import { gsap } from "gsap".
2. Maybe tweak the order in which things are getting transpiled in your build tools so that it INCLUDES transpiling the GSAP files (it's common for build tools to exempt anything inside node_modules). 

48 minutes ago, ADigital said:

I have been a greensock member since you first made club greensock (and using it from long before that - id guess we are nearly 16years+ of gsap now and i could not live without it, allthough i miss Actionscript lol). Many thanks!

That's fantastic! It always warms my heart to hear from folks like you who have been loyal users (and paying members!) for so many years! We really couldn't do what we do without people like you, so thanks!

[ADigital]

Thanks Jack!
Haha us frontend guys really arnt cut out for the black box background stuff ay  - ill give that a try and when i figure ity out ill report back (ill get one of the cleaver guys in the team to take a poke).

Its been a great ride and wierdly i dont feel like the bulk of GSAP has changed that much in the whole time i have used it - it keeps up with the latest tech but the beauty for me is i am using almost the same method of writing the animated and interactive today as i was then, this lets me think about the cool stuff not the code - i have also had a great career and a lot of that is down to gsap - so high fives all round!

 

Cheers brother.

 

[GreenSock]

You're totally right - GSAP is largely using all the same concepts of the original v1 from almost a decade ago. We've just modernized things and cleaned up the API a bit to make it more concise. It gives me great satisfaction to hear from an experienced dev like you saying that the tools have served you so well all these years and contributed to your career! Makes the hard work feel worthwhile. A lot of people don't understand the thousands and thousands of hours that have been poured into the platform, the docs, supporting it, etc. So yeah, high-fives back at ya. Thanks for sharing and good luck with the project. 🙌

[Fly]

Hello,

 

I just want to leave some info about Angular Universal / SSR and GSAP.

I was getting the following error:
 

ERROR TypeError: Cannot read property 'querySelectorAll' of undefined

I fixed this by checking if the current platform is the browser. Obviously it cannot run on the server.
Maybe not the best solution but at least its working for now :)
 

constructor(
        @Inject(PLATFORM_ID)
        private platformId: any
    ) {
    }

    ngOnInit(): void {
        gsap.registerPlugin(ScrollTrigger);
    }

    ngAfterViewInit(): void {
        if (isPlatformBrowser(this.platformId)) {
            gsap.from('.header__logo', {
                scrollTrigger: {
                    trigger: '.header__logo',
                    scrub: true,
                },
                y: 600,
            });
        }
    }

I hope this helps someone.