shai

Using Draggable in Angular

Recommended Posts

** upon further inspection a console.log(Draggable); comes up as undefined, This error is being thrown due to the Draggable module not being successfully included in the component.

blob.thumb.png.f26c732c3935da70d62646bedf28c0eb.png

 

Good afternoon,

 

I am using the npm library for gsap on my angular project, and have been attempting to implement this into an angular component.

 

Error

The error I am receiving is "ERROR TypeError: Cannot read property 'create' of undefined"

 

Reference

 

I have a fairly standard angular4 component pictured below.

 

I did the standard "npm install gsap"

 

I include the import statement for Draggable according to the npm repo for gsap

 

Solutions tried

 

I've looked on forums, and some past answers from 2016 say to include the library with a link in webpack, however, it seems like it would defeat the purpose of having a node_module to import.

Share this post


Link to post
Share on other sites

Hm, I'm not quite sure what might be the problem. Your "import Draggable from 'gsap/Draggable'" seems correct. I'm not very familiar with Angular. @OSUblake is usually pretty good with this stuff - perhaps he'll have some suggestions. 

 

I noticed that you've got a "TimelineLite" declaration there but I didn't see an import statement. I wonder if the packager is choking on something else along the way, before it gets to Draggable. Totally guessing. 

Share this post


Link to post
Share on other sites

Thanks for the reply Jack,

 

the import 'gsap'  on line 6 imports the global scope of gsap, the declare on line 10 is just there to keep typescript happy, since there are no types, and I do not like the definitely typed files.

 

TimelineLite works perfectly as expected, however, I'll follow your suggestion and try Draggable by itself and report my findings

Share this post


Link to post
Share on other sites

Well I am glad that was such a simple oversight!

 

The plugin works as expected now, I am also excited to hear that GSAP will be getting supported definitions!

  • Like 1

Share this post


Link to post
Share on other sites
On 10/2/2017 at 5:26 AM, OSUblake said:

TypeScript doesn't create synthetic default imports like Babel does, so you need to import stuff like this.


import * as Draggable from "gsap/Draggable";

 

And we're working a new set of definitions.

https://github.com/greensock/GreenSock-JS/issues/231

 

 

Hey @OSUblake I'm curious if the club greensock plugins will also get definitions, or if the typings repo is only for the free plugins.

Share this post


Link to post
Share on other sites
On 10/18/2017 at 11:53 PM, shai said:

 

Hey @OSUblake I'm curious if the club greensock plugins will also get definitions, or if the typings repo is only for the free plugins.

 

It will include everything. :-D

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.