search

greensock / GSAP

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
https://gsap.com
19.56k stars 1.72k forks source link

Error in an @angular/cli project using TweenMax library #228

Closed saiyaff closed 6 years ago

saiyaff commented 7 years ago

I've integrated the gsap library with an @angular/cli project using .angular-cli.json as the method shown here

@ViewChild('imageTest') imageTest;

testImage() { let imageTest = this.imageTest.nativeElement; TweenMax.to(imageTest, 1, { width: '50%', repeat: 3, repeatDelay: 0.5 }); }


It shows an error saying, (build time error in the console)

> ERROR in G:/99X Projects/app.maturify/src/app/public/login/login.component.ts (134,33): Argument of type '{ opacity: number; repeat: number; yoyo: t
rue; }' is not assignable to parameter of type 'TweenConfig'.
  Object literal may only specify known properties, and 'opacity' does not exist in type 'TweenConfig'.
ERROR in G:/99X Projects/app.maturify/src/app/public/login/login.component.ts (134,33): Argument of type '{ opacity: number; repeat: number; yoyo: t
rue; }' is not assignable to parameter of type 'TweenConfig'.
  Object literal may only specify known properties, and 'opacity' does not exist in type 'TweenConfig'.

Just tried removing the width property, then it resulted in an error in console as below

> LoginComponent.html:9 ERROR TypeError: Cannot read property 'to' of undefined
    at LoginComponent.webpackJsonp.../../../../../src/app/public/login/login.component.ts.LoginComponent.testImage (login.component.ts:133)
    at Object.eval [as handleEvent] (LoginComponent.html:9)
    at handleEvent (core.es5.js:11995)
    at callWithDebugContext (core.es5.js:13456)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13044)
    at dispatchEvent (core.es5.js:8599)
    at core.es5.js:9210
    at HTMLDivElement.<anonymous> (platform-browser.es5.js:2668)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3881)
View_LoginComponent_0 @ LoginComponent.html:9
proxyClass @ compiler.es5.js:14963
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13396
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:9214
(anonymous) @ platform-browser.es5.js:2668
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
ZoneTask.invoke @ zone.js:486
LoginComponent.html:9 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 6, nodeDef: {…}, elDef: {…}, elView: {…}}

Any help would be appreciated.
jackdoyle commented 7 years ago

Frankly, I'm not very familiar with Angular or what might be going on in your particular project, but have you tried not including TweenMax in your scripts array at all or pointing it at the root, uncompressed file instead of the minified one?: 

"../node_modules/gsap/TweenMax"

?

saiyaff commented 7 years ago

Thanks for the response @jackdoyle "But have you tried not including TweenMax in your scripts array at all or pointing it at the root" If this is saying about adding the library in the index.html in the script element, yes. The same error occurs. I've tried "../node_modules/gsap/TweenMax.js" or "../node_modules/gsap/src/uncompressed/TweenMax.js" also and no luck with that.

jackdoyle commented 7 years ago

Hm, I'm not quite sure what to tell you. I wish I had more time to get up to speed with Angular and the build process you're using, but I know that plenty of folks are using GSAP with Angular, Webpack, various other build systems, etc. so my guess is that there's something a little off with your configuration or something. I wish I had a better answer for you. Perhaps someone else has some insight to offer. Feel free to post in the GreenSock forums where you'll have a better chance of some experts chiming in. https://greensock.com/forums/

DennisSmolek commented 7 years ago

I've been using Angular2 for a while now and it can get super finicky with imports and your setup.

The first error is a typescript error, I'm not sure if you are just using the npm library for the types but there is also : @types/gsap that you should add as well.

Also, if you can do the import you shouldn't also add it to the scripts. From your link:

Once you import a library via the scripts array, you should not import it via a import statement in your TypeScript code (e.g. import * as $ from 'jquery';)...

Checkout this page on 3d party libs from the CLI

I looked into the typescript and I may have found where the issue is on problem 1. For tweenLites the to() method has a different pattern:

/** Static method for creating a TweenLite instance that animates to the specified destination values (from the current values). */
        static to(target: any, duration: number, vars: any): TweenLite;

Then TweenMax

/** Static method for creating a TweenMax instance that animates to the specified destination values (from the current values). */
        static to(target: {}, duration: number, vars: TweenConfig): TweenMax;

It looks like it doesn't like your vars object having unknown properties. Not totally sure what you can do besides create your own .ts file, but it seems like everyone should be having the same TS error.

As to the second error in your console, my guess is there is confusion between your imported version of gsap and your global version. I would do a console.log('window', window) and see what globals are being loaded and when...

Hope that leads you in the right direction!

OSUblake commented 7 years ago

@msaiyaff @DennisSmolek Those are not official definitions, and should not be used. For now, you use these. https://greensock.com/forums/topic/16395-gsap-business-green-in-angular-2/#comment-74644

Using the Angular CLI works fine. You should not use import with GSAP if you add it to the global scripts. Choose one or the other. If you have anymore questions, ask on the forum. Github issues should be used for tracking bugs.

Thanks!

DennisSmolek commented 7 years ago

Ah my bad sorry. Is there anything you can do to get those old ones off @types? That's generally the primary method even angular is pushing so the problem may come up more.

OSUblake commented 7 years ago

Ah my bad sorry. Is there anything you can do to get those old ones off @types?

Yep. I'll continue this conversation over in https://github.com/greensock/GreenSock-JS/issues/231