Using Draggable in Angular

[shai 2 Likes (Newbie)]

** 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.

 

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.

[GreenSock 8,117 Likes (Superhero)]

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. 

[shai 2 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

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

 

[shai 2 Likes (Newbie)]

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!

[shai 2 Likes (Newbie)]

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.

[OSUblake 9,990 Likes (Superhero)]

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.