Using with Angular5/6

[fatnjazzy 0 Likes (Newbie)]

Hi,

I want to using this amazing framework angular,

Can someone please post a https://stackblitz.com example of how to use with angular? (including typing if possible.). 

Thanks

[Sahil 2,655 Likes (Superhero)]

Here is one example by @OSUblake

 

https://stackblitz.com/edit/angular-tkmxb4

 

Take a look at docs for NPM usage, https://greensock.com/docs/NPMUsage

[fatnjazzy 0 Likes (Newbie)]

Thanks, the auto complete should work? because it isn't i think.

 

[Sahil 2,655 Likes (Superhero)]

Sorry I am not sure, @OSUblake can comment on that. Recently he mentioned types are incomplete, I am not aware of any workaround that.

 

 

[fatnjazzy 0 Likes (Newbie)]

Thanks, Ill wait for his response.

 

Also, im importing 

import * as Draggable from "gsap/Draggable";

 

and im getting this error:

 

Quote

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: gsap_Draggable__WEBPACK_IMPORTED_MODULE_1__.create is not a function
    at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:52)
    at checkAndUpdateDirectiveInline (core.js:9251)
    at checkAndUpdateNodeInline (core.js:10515)
    at checkAndUpdateNode (core.js:10477)
    at debugCheckAndUpdateNode (core.js:11110)
    at debugCheckDirectivesFn (core.js:11070)
    at Object.eval [as updateDirectives] (AppComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11062)
    at checkAndUpdateView (core.js:10459)
    at callWithDebugContext (core.js:11352)

 

[OSUblake 18,492 Likes (Superhero)]

7 hours ago, fatnjazzy said:

Thanks, Ill wait for his response.

 

Also, im importing 

import * as Draggable from "gsap/Draggable";

 

 

That works when importing Draggable with TypeScript with older versions of GSAP or when using the umd versions. If you're using the latest version of GSAP (2.0.1), try importing like this.

import Draggable from "gsap/Draggable";

 

And there won't be any auto-complete for Draggable. If you get errors, the simplest way to silence is to add this to your code.

declare var Draggable;

 

[fatnjazzy 0 Likes (Newbie)]

Hi, @OSUblake  Thank you.

Im using the latest version. 

changed it to:

import Draggable from "gsap/Draggable";

declare var Draggable;

Still I get the same error from above.

Thanks

[OSUblake 18,492 Likes (Superhero)]

I'm not sure what the problem is. It seems to works on Stackblitz. Maybe try exporting it and building it locally and see it if still works.

https://stackblitz.com/edit/angular-3rxkgr

 

[marczenkner 1 Likes (Newbie)]

I had the same issue in Angular 6 with WebStorm showing that the 'gsap/Draggable' didn't exist. Drove me nuts. But after visiting here I just ran it anyway and the application works fine - doesn't throw an errors. 

[M Khalid Junaid 1 Likes (Newbie)]

To use Draggable with Angular 6 you might need to install types from green sock

 

npm install --save-dev @types/greensock

 

And in component import Draggable as 

 

import { Draggable } from "gsap/all";