Jump to content


GSAP Angular2 typescript import not working properly

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

Hi, this is a confusing one for me, I have an Angular 2 app using typescript, this project is using the angular CLI
I have been having problems with the GSAP import, the import statement in my component is as follows

import { TweenLite, Linear } from 'gsap'; 

Now this works actually, I mean I can use the TweenLite object and do tween things and see the results on the page, however I was getting the build error through ng serve:
...@types/gsap/index.d.ts' is not a module.
This is a problem because it prevents me from making a dist build. I noticed in the latest @types release the line

export = TweenLite;

was added to index.d.ts, I thought this might fix things so I updated it, but no, now I get the error @types/gsap/index"' resolves to a non-module entity and cannot be imported using this construct. 


I'm confused and don't fully understand how types work really but every other library I use either works like this or I use import * as ... from 'some lib' syntax and it works, can anyone help me get rid of these compilation errors?

Link to comment
Share on other sites

In case anyone stumbles on this post from google I figured out a solution, however it seems hacky.


In typings.d.ts add the line:

declare module 'gsap' { let exportAs: any; export = exportAs; }

Then in your component import like:

import * as T from 'gsap';

And access like:

T.TweenLite.to(......., T.Linear.easeNone);

I'd still be interested in an explanation, is it just that the @types file has been poorly written? 

Link to comment
Share on other sites

Give it a moment until Blake wakes up, he's the Angular resident expert, he'll probably have a comment on this.

  • Like 1
Link to comment
Share on other sites

Yeah, Blake is our resident expert on this, but I can say that any *.ts file you have is not from us. We don't distribute anything like that. Where did you get yours? 

Link to comment
Share on other sites

Hi! Yes I realise that, no blame on you guys, I love the library, the issue is actually with 3rd party type definitions written by the community for your library.


I did post it here however because I thought it had a high chance of someone here having encountered the same issue, if anyone here is using typescript and GSAP.

Link to comment
Share on other sites

I've been meaning to write a set of definitions for TypeScript 2.x. I just haven't gotten around to it yet.


I wrote about getting that error on Stackoverflow for another library...



... but I don't see why you would get it with the GSAP definitions. They are a little incomplete, but will work for most use cases.


Depending on your editor, you might be able to drag and drop a set of definitions into the tsd.d.ts file, and it will list them like this. 

/// <reference path="greensock/greensock.d.ts" />
/// <reference path="lodash/lodash.d.ts" />
/// <reference path="jquery/jquery.d.ts" />

That's how I set my definitions up. The files paths might look at little different with the new @types you are using, but it should look something like that... I think  :rolleyes:


  • Like 1
Link to comment
Share on other sites

  • 3 months later...

With Angular-cli, this works for me: 

npm install gsap --save
npm install @types/greensock

Add types in tsconfig.app.json under "compilerOptions":

"types": ["greensock"]

The last step is import GreenSock in main.ts: 

import 'gsap';

After the above steps, I am able to start using "TweenMax" everywhere in the app. 


However, there is one problem, I could not find a way to include TweenLite only in my final production bundle, for smaller production size. I hope someone could post their solution here.

Link to comment
Share on other sites

I'm not familiar with that type of setup, so this may not be helpful but have you tried:

import TweenLite from "gsap/TweenLite"

I'm a little confused, though, because if you're writing code that references TweenMax you can't just load TweenLite and expect everything to work. Are you animating anything that requires CSSPlugin? I'd bet you are (it's the most common thing we see out there), so it's probably best to just leave TweenMax since it includes CSSPlugin too. 

  • Like 1
Link to comment
Share on other sites

Thanks Carl!


I have not tried your suggestion, but I tried:

import {TweenLite, Linear} from "gsap";
When I only want to import TweenLite, I do not use TweenMax. However, it doesn't work, when I inspect my bundle, I see TweenMax being included even I do not use TweenMax anywhere.


I think I will leave TweenMax as you suggested so. It is only 113k anyway, smaller than most of my images lol.

Link to comment
Share on other sites

Yeah, TweenMax is less than 40k gzipped and minified, so it's not bad at all. And remember, "gsap" in your context refers to TweenMax (because that's what the "main" is defined as in the package.json). Also, I assume you meant "Linear", not "Leaner" in your import statement, right? 


Like I said, if you only want TweenLite, you should be able to do:

import TweenLite from "gsap/TweenLite";

Happy tweening!

Link to comment
Share on other sites

It is Linear, I edited just in case.


I could live with 40k gripped, making the whole thing a lot easier to manage.

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.