Business Green plugins with Angular / NPM

[jorma]

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?

[OSUblake]

You can install from a folder or your own repo.

 

 

And if you're using TypeScript, you should probably import plugins/utils using this syntax.

 

import * as CustomWiggle from 'gsap/CustomWiggle';

 

[jorma]

Yup! Both those tips were spot on. Thank you so much. Enjoy your day!

[jorma]

I did have to add 

"allowJs": true,

 in tsconfig.json.

[OSUblake]

Thanks! Forgot to mention that.

[Sahil]

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?

 

 

[jorma]

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

[Sahil]

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.

[OSUblake]

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. 

[jorma]

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!

[OSUblake]

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.

[Sahil]

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

[OSUblake]

Just send me your project, and I can take a look at it later. 

[OSUblake]

Same thing for @AceBoy and @LucitheR

 

You can send me a PM with it. 

[Dipscom]

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.

[Sahil]

38 minutes ago, Dipscom said:

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.

 

Ya it made sense that's why I gave it a try.

[jorma]

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!

 

 

[Sahil]

@jorma Thanks. That solved it.

[jorma]

@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!

[OSUblake]

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

 

 

[jorma]

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

[OSUblake]

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.

[jorma]

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.

 

[OSUblake]

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.

 

 

[GreenSock]

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.