Jump to content
Search Community

Business Green plugins with Angular / NPM

jorma 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

I'm using Greensock in an Angular app. The standard GSAP components I can all import normally through NPM. I've also gotten the Business Green plugins to work by dumping them into the GSAP folder in my node_modules and doing something like this:

import CustomWiggle from 'gsap/CustomWiggle';

 

I would very much like a cleaner solution than copying files into node_modules by hand. What would be the best way to import these files into my project?

Link to comment
Share on other sites

About allowJs, following is a pending thread where Dipscom suggested to use club files outside the npm modules by creating 'vendors' folder at root. I am trying my hand at angular recently and gave it a try. Using GSAP with Angular/Ionic has been pretty straight forward if I just copy them in 'node_modules/gsap' but when I tried include them as Dipscom suggested, I was getting same error as OP in that thread, any ideas?

 

 

Link to comment
Share on other sites

I put all the plugins into: src/assets/gsap/plugins

I referenced them like so:

import * as DrawSVGPlugin from '../../../assets/gsap/plugins/DrawSVGPlugin';

(obviously you need to tailor the nr of ../'s to your directory structure)

And I added:

"allowJs": true,

to tsconfig.json.

 

That was it...

  • Like 1
Link to comment
Share on other sites

Ya my path is correct but first I get error asking to use allowJs, once I use allowJs I get following error,

 

Quote

Cannot write file because it would overwrite input file.

 

Searching for these errors on google hasn't been fun, you just get many unrelated results. Found one thread on stack overflow suggesting to use outDir but that just messes up everything.

  • Like 1
Link to comment
Share on other sites

It's trying to write a file at that location for whatever reason. 

 

allowJs is if you are using TypeScript to compile to a single file. And there's probably multiple tsconfig files in your project.

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

https://www.typescriptlang.org/docs/handbook/compiler-options.html

 

If you're using a CLI tool, which I guess Ionic uses, then the build process is probably going to be different, so you probably don't want to do that. It's really hard to answer questions like this without seeing your project. 

  • Like 3
Link to comment
Share on other sites

Just a guess but could it have to do with the fact that you put the files in the folder 'vendor'? That sounds like a folder that could be used as a destination for compiled files. Again, just guessing...

Good luck!

  • Like 2
Link to comment
Share on other sites

1 minute ago, jorma said:

Just a guess but could it have to do with the fact that you put the files in the folder 'vendor'? That sounds like a folder that could be used as a destination for compiled files. Again, just guessing...

Good luck!

 

That's a good point! I've seen some CLI tools create a 'vendor' folder before.

  • Like 1
Link to comment
Share on other sites

I should have said that idea of putting on a vendor's folder is just a concept - to not manually put files into node_modules yourself.

 

You need to take in consideration how your build tool and framework compile stuff. In my case I am, usually, working with Brunch.io and VueJs where I know how to setup such 'vendor' folder without breaking the compiling.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
On 10/01/2018 at 2:42 PM, Sahil said:

Thanks, that didn't really help. But I will let it be for now and revisit it again someday.

 

@Sahil, I just upgraded all the packages in my project and got the same error as you did. When transpiling, typescript would warn about overwriting my .js files. Setting allowJs back to false in tsconfig.json fixed that issue. I don't really know why I needed that particular setting earlier and ran into this issue after upgrading. Maybe a change in the way typescript transpiles JavaScript files...?

 

Anyway, I hope it helps for you!

 

 

  • Like 1
Link to comment
Share on other sites

@OSUblake, regarding DrawSVGPlugin, the only way I can get it to work is by adding it as a script tag to my HTML.

 

Like so:

<script src="assets/gsap/plugins/DrawSVGPlugin.min.js"></script>

 

Doing something like this:

import * as DrawSVGPlugin from '../../../assets/gsap/plugins/DrawSVGPlugin';

works for plugins that are directly addressed in the component but doesn't work for DrawSVGPlugin when I use the attribute 'drawSVG' in my vars object.

 

Any ideas as to how I should import it? Or is my script tag solution actually the best way?

 

Thanks in advance!

Link to comment
Share on other sites

22 hours ago, OSUblake said:

Hi @jorma

 

Are you using the Angular CLI? If so, you can just add your scripts to the .angular-cli.json file, and it will import them for you.

 


"scripts": [
  "assets/gsap/TweenMax.js",
  "assets/gsap/plugins/DrawSVGPlugin.js"
]

 

https://github.com/angular/angular-cli/wiki/stories-global-scripts

 

 

 

Thank again @OSUblake!

 

For those that come across this post: you need to restart ng serve for this to work. And I don't seem to need the TweenMax line. In fact I get an error when I include that file (the minimised version to be precise). 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

36 minutes ago, jorma said:

And I don't seem to need the TweenMax line. In fact I get an error when I include that file (the minimised version to be precise). 

 

I just tried that, but I didn't get an error. It sounds like you might be importing TweenMax/gsap somewhere else, which would probably cause a problem as it would be loading it twice.

  • Like 1
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

I just tried that, but I didn't get an error. It sounds like you might be importing TweenMax/gsap somewhere else, which would probably cause a problem as it would be loading it twice.

 

To be clear, it works perfectly fine as long as I don't add TweenMax to the scripts property in .angular-cli.json. So there really is no problem to solve.

 

With that out of the way... I get the following error in the console of the page (not the terminal):

ERROR TypeError: gsap_1.TimelineMax is not a constructor

I import TimelineMax like so: import { TimelineMax, Power2 } from 'gsap'; in my component.  I can also import TweenMax in the same fashion (if I needed to). Why would I want to load it globally? I understand this is necessary for DrawSVGPlugin because it is used indirectly by GSAP.

 

Link to comment
Share on other sites

20 hours ago, jorma said:

With that out of the way... I get the following error in the console of the page (not the terminal):


ERROR TypeError: gsap_1.TimelineMax is not a constructor

 

 

That seems to be a common problem, but I don't know how to reproduce it. Can you send me a simplified version of your project so I can see what's going on?

 

20 hours ago, jorma said:

Why would I want to load it globally? I understand this is necessary for DrawSVGPlugin because it is used indirectly by GSAP.


As an alternative to importing. As you've seen, the whole process can be rather brittle.

 

 

@GreenSock Did you see this post by @Sahil

 

 

It made me realize why people are having trouble importing plugins. The code to activate the plugin never runs! Modules imported with name bindings will not be evaluated if you don't directly access something from that module. I'm guessing this is so optimizations like tree shaking can take place. If you don't use it, you lose it.

 

 

  • Like 2
Link to comment
Share on other sites

On 1/25/2018 at 3:41 AM, OSUblake said:

It made me realize why people are having trouble importing plugins. The code to activate the plugin never runs! Modules imported with name bindings will not be evaluated if you don't directly access something from that module. I'm guessing this is so optimizations like tree shaking can take place. If you don't use it, you lose it.

 

@OSUblake ah, I see what you mean. Ha. Well, I'm not quite sure how to solve that exactly - got any ideas? Seems like the build tool is dumping stuff that shouldn't be dumped, so other than telling people to reference the plugin in their code somewhere, I don't know what'd prevent the tree shaking fallout. 

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