Can't import Draggable - Angular 2

[Quasso]

Bonjour!

I'm trying to import Draggable into my Angular 2 controller, as such:

import Draggable from 'gsap/Draggable';

However, when loading the page I consistently receive this console log:

GSAP encountered missing dependency: plugins.CSSPlugin

Any ideas what's wrong here? I noticed that within the past week the way to import was changed, which I saw in another issue which I can't find the reference to.

Thanks for all the hard work.

[jackdoyle]

Hm, you've got GSAP 1.19.1, right? I wonder if you've got something from an older package cached or something. And you're installing from NPM, right?

[fregante]

Are you using webpack?

[Quasso]

@jackdoyle yes I have the latest, and I installed that package yesterday via NPM for the first time

@bfred-it I am indeed, is there a known issue w/webpack? I should've put that in the original issue, my mistake!

[fregante]

1. Verify that CSSPlugin is inside the bundle with --display-modules
2. Can you link to the non-working page?
3. Can you post your bundle?

In my test CSSPlugin is correctly bundled with webpack 2:

And with webpack 1 (no extra loaders, commonjs only)

[Quasso]

Unfortunately I can't, since I'm working locally on this and it's a private project, sorry about that.

I am however using the same version of webpack, although I am also using TypeScript (2.1.5), & Angular 2.4.3 if that information is of any particular use.

When I do the import on Draggable, given the fact that it's Tweenlite that logs to the console about the plugin, it must be that the imports are at least partially working with this configuration as expected, right?

[dmitrybz]

Same problem with Angular-cli beta.32.3 (webpack 2), Angular 2.4.8: If import like const Draggable = require('gsap/Draggable');

GSAP encountered missing dependency: plugins.CSSPlugin

When i am trying to import Draggable from 'gsap/Draggable'; - i get compiler error

Cannot find module 'gsap/Draggable'

UPDATE oops, updating to angular-cli-1.0.0-rc0 and typescript 2.2.1 solves the problem!

[saiyaff]

@dmitrybz I am quite stuck here with an error. Can you please help on that? Issue here...

[jwuliger]

Hello everyone - To anyone (like me) who came across this from a Google search. I found that the solution for me was to import Draggable like this:

import * as Draggable from 'gsap/Draggable';

I am using Angular CLI 1.6.1 (Nightly Builds), Angular 5.2.0-beta.1, and gsap 1.20.3

I also removed @Types/gsap from my dev dependencies since the typings shipped with gsap are newer.

Hope this helps someone. Thanks!

[jackdoyle]

Thanks for chiming in, @jwuliger!

[OSUblake]

Yes. If you're using TypeScript, all GSAP plugins and utilities should be imported using the import * as syntax. This will change in the future once GSAP switches over to using es modules.

[jwuliger]

Well that is some good news to hear! We are currently using Angular 5 and rely heavily on GSAP. ES modules sound fantastic. I do have to say though that I am currently able to import some of the libraries by using their name directly like I wouldn’t normally import an ES module. For example TweenMax or TimlineLite. Just out of curiosity would you happen to know a rough ETA on when developments will begin on the re-factoring? Thanks!

[OSUblake]

A refactor of GSAP is in the works, but I'm not sure about an ETA for when it will be ready.

What's really happening when you import "gsap", is that it's adding everything that comes with TweenMax to the window (TweenLite, TweenMax, TimelineLite, TimelineMax, CSSPlugin, EasePack, etc), and as static properties to TweenMax, so that's why you can use some of those names directly.

For plugins and utilities like Draggable, things are little different because of the way GSAP sets the module.exports. At one point, you could only import like this..

import Draggable = require("gsap/Draggable")

TypeScript has since relaxed this restriction, allowing you to import using the import * as syntax.

[jackdoyle]

Yep, I'm working on a refactor into ES6 modules, but it'll take a while to complete, partially because I'm revamping a bunch of other stuff as well. For example, dropping support for IE8 and some other legacy stuff that's useless on the modern web. Plus I've got some new features in mind :) It'll probably be at least a few months until it's ready for the public. Sorry for the delay, but it's no small task. In the mean time, 1.x should totally work in build systems as well, it's just a bit more awkward to import in some cases.