Jump to content
Search Community

Using Draggable in Angular

shai test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

Link to comment
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. 

Link to comment
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

Link to comment
Share on other sites

  • 3 weeks later...
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.

Link to comment
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.
×
×
  • Create New...