Angular 7 GSAP 3 - Failed to perform build production AoT

[diegodsgarcia]

I have a simple project with Angular 7 using GSAP 3. That's it works perfectly with comand 'ng serve' and 'ng build' of Angular CLI, but when I use the comand 'ng build --prod',  the application throws the following error:

 

"Uncaught TypeError: Cannot read property 'easeIn' of undefined".

 

I think the problem just happens in AoT build mode of Angular.

 

Could someone help me with this?

 

Thanks!!

 

[ZachSaucier]

Hey diegodsgarcia and welcome to the GreenSock forums.

 

It's impossible to say exactly what the issue is given you haven't provided the code that is throwing this issue, but my guess is that it it relates to not importing the correct ease in object form. For example if you have a tween like this:

gsap.to(".elem", {x: 100, ease: Power2.easeIn});

then you need to make sure to import that ease in your project:

import { gsap, Power2 } from "gsap";

Alternatively you could use the recommended way of eases in GSAP 3: the string form. Then you don't have to worry about importing the ease object like above:

gsap.to(".elem", {x: 100, ease: "power2.in"});

 

[diegodsgarcia]

Thanks for awnswer!

But I think that's a problem with the Angular because I made a blank project only with code for test:

 

gsap.from('nav a', { opacity: 0, duration: 1, stagger: .5 });

 

I'm not using any 'ease', I just use the default of gsap Object...

 

I made some tests and only works in mode AoE of ng cli when I add the lib in angular.json file of scrips globals.

 

            "scripts": [

              "./node_modules/gsap/gsap-core.js"

            ],

 

 

[diegodsgarcia]

It's really funny, because the error only occurs with mode AoT.

 

When I have more time, I will try test with the version 8 of Angular.

[ZachSaucier]

9 minutes ago, diegodsgarcia said:

I made some tests and only works in mode AoE of ng cli when I add the lib in angular.json file of scrips globals.

That's a pretty clear sign is that something is being tree shaken that shouldn't be. Can you please create a minimal project that shows the issue and either upload it to something like GitHub or make a ZIP file?

[diegodsgarcia]

Here!

 

https://github.com/diegodsgarcia/gsap-test-angular-7

 

(I remove the script in angular.json to try test)

 

For test I only run ng build --prod and up a http server with dist files (I use the package of npm http-server https://www.npmjs.com/package/http-server)

 

 

 

 

[OSUblake]

Angular AoT builds have always had a problems. Nothing new. 

[OSUblake]

Similar thread, but for older version of gsap. 

 

I've looked into this before, but I don't know how their compiler works.

[ZachSaucier]

@diegodsgarcia Did you try the answer in this post? https://stackoverflow.com/a/57930433/2065702 Using gsap, not TweenMax of course.

[diegodsgarcia]

4 minutes ago, OSUblake said:

Similar thread, but for older version of gsap. 

 

I've looked into this before, but I don't know how their compiler works.

 

Yeah! I have no idea too. I see the thread, and only solution that I got works was when I put the gsap in scripts in angular.json 

 

?

[diegodsgarcia]

1 hour ago, ZachSaucier said:

@diegodsgarcia Did you try the answer in this post? https://stackoverflow.com/a/57930433/2065702

 

Humm I can try, but I don't know if I can disable the option in my project of work. I need see that's option have a great influencie in perfomace.

[OSUblake]

21 minutes ago, diegodsgarcia said:

Humm I can try, but I don't know if I can disable the option in my project of work. I need see that's option have a great influencie in perfomace.

 

Importing from gsap/all is just for convenience. It will not affect performance.

https://greensock.com/forums/topic/21961-plugin-issue-with-gsap3-npm-and-nuxtjs/?tab=comments#comment-104188

 

But that doesn't fix this issue.

 

27 minutes ago, ZachSaucier said:

@diegodsgarcia Did you try the answer in this post? https://stackoverflow.com/a/57930433/2065702 Using gsap, not TweenMax of course.

 

There's a reason that answer has no upvotes. I just gave it a downvote so people won't waste their time trying it.

 

Maybe @GreenSock can figure out why this might undefined.

 

 

[GreenSock]

1 hour ago, OSUblake said:

Maybe @GreenSock can figure out why this might undefined.

I poked around and yeah, there are major problems with whatever the bundler is doing (tree shaking). I'm pretty confident this has nothing to do with GSAP.

 

Even when I figured out a way to prevent it from dropping the Linear object (which it never should have done anyway), it just ran into more problems because it literally dropped the gsap object itself! I'd say it's clearly bugs/problems in whatever the build process is doing. I definitely wouldn't recommend trusting that with your assets. Maybe there's some kind of configuration you must do to make it less aggressive/buggy but I'm not at all familiar with Angular or the Angular AoT. 

[Nexib]

It al has to do with what your (Angular) project is using or not. When simply importing specific imports from gsap the bundler includes only that specific objects & its dependencies. The plugin registration (in the way it is currently set up) and the initialisation of gsap is skipped.

That can be simply changed: Import the plugins you need & the gsap object. For Angular somewhere in the top op your main.ts file.

import { EaselPlugin, gsap } from "gsap/all";

gsap.registerPlugin(EaselPlugin);

 

[OSUblake]

You are supposed to register plugins when importing, but that has nothing to do with the AoT issue. 

[diegodsgarcia]

3 hours ago, Nexib said:

It al has to do with what your (Angular) project is using or not. When simply importing specific imports from gsap the bundler includes only that specific objects & its dependencies. The plugin registration (in the way it is currently set up) and the initialisation of gsap is skipped.

That can be simply changed: Import the plugins you need & the gsap object. For Angular somewhere in the top op your main.ts file.

import { EaselPlugin, gsap } from "gsap/all";

gsap.registerPlugin(EaselPlugin);

 

I try import in main.js with your code but, nothing..... Same problem in AoT mode....

[GreenSock]

Yeah, I verified yesterday that the bundler is inappropriately dropping things that are essential...even things that are referenced in the file itself that end up getting [partially] included in the final result! Clearly a bug in the bundler. I'd recommend contacting the author(s) of that project and inquiring about how to fix that - maybe there's a configuration that'd resolve things. 

[diegodsgarcia]

I test in Angular 8 and.... Works. 

 

it seems to me  in Angular 7 really doesn't works with AoT mode

 

?

[a1rat91]

Same problem on angular 8 for me

[OSUblake]

Raise an issue with Angular. It's their build tool that is causing problems.

[Titan]

On 12/14/2019 at 5:52 PM, a1rat91 said:

Same problem on angular 8 for me

Any solution for this? 

[Cassie]

I assume that the same suggestion as above applies - raise an issue with Angular. It's not a GSAP problem, sorry we can't be more helpful!

[GreenSock]

Yeah, and that error seems to indicate that you must be using the old/legacy easing syntax: 

// OLD/BAD
ease: Power1.easeIn

// NEW/GOOD
ease: "power1.in"

I'd strongly recommend updating to the latest syntax (3+ years old now).

?