How to use Business GreenSock in angular 2/4 with webpack

[apploud 2 Likes (Newbie)]

I read every topic about angular and webpack but I can't still solve the issue - how to use Pro functions in angular

 

I have downloaded this repository https://github.com/AngularClass/angular-starter

 

then I created private npm package called 'my-business-gsap' (in a folder on the desktop by npm init - and fill only necessary fields)

 

I copied files from common-js plus folders 'minified' and 'uncompressed'

 

then I went back to project and add my private package by npm install "path to folder"

 

I added folder with gsap typescript definitions and wrote reference to custom-typings.d.ts

And If I want to use it, I have to add it part by part like that (simple - import 'my-business-gsap' not working)

 

import { Component, OnInit }from '@angular/core';

import { TweenMax } from 'my-business-gsap'
import { EasePack } from 'my-business-gsap'
import { TimelineMax } from 'my-business-gsap'
import { CustomEase } from 'my-business-gsap'

import $ from "jquery";

@Component({
  selector: 'home'
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
 
  constructor() {}

  public ngOnInit() {
      var element = $("#coin > div");
      
      var timeline = new TimelineMax({ repeatDelay: 1.2, repeat: -1, yoyo: false });
      timeline
        .to(element, 0, { rotation: 1 })
        //.. more code...
        .staggerTo(element, 1.5, { rotation: -1260, ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.332,0.678 0.654,0.808 0.819,0.875 0.88,0.874 1,1") }, .06)
        //.. more code...

  }
}

 

 Simple Tweens or Timelines are ok but things like CustomEase... is possible to compile but in chrome its throw message 

core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'create' of undefined

 

 

CustomEase is undefined

 

Is there somebody who could help me, please? 

 

 

[OSUblake 9,990 Likes (Superhero)]

Hi @apploud,

 

Can you send me your project so I can take a look? I think I know what the problem is.

 

Your setup with the private npm and custom d.ts sounds interesting. I think a lot of other people might benefit from it.

 

 

 

[apploud 2 Likes (Newbie)]

Of course. How can I send it, By mail?

 

[OSUblake 9,990 Likes (Superhero)]

Oh, I just sent you a PM with my email, so you can remove your email.

[OSUblake 9,990 Likes (Superhero)]

I just found why so many people have been getting errors with Angular. According to the docs, you should import modules like this.

import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";

 

But doing that will result in an error for most TypeScript builds. The problem is that GSAP doesn't use ES6 modules, and exports a default in a CommonJS (CJS) format like this.

module.exports = Draggable;

 

That works fine for CJS, but there is no way to map that export 1-to-1 to an ES6 module. Babel tries to make it look like an ES6 module by wrapping it in an object like this.

module.exports = { default: Draggable };

 

Doing that allows you to use the syntax above, but it also has a bunch of side effects. To avoid creating similar issues, the TypeScript team decided it was better to leave the exported module alone, and it remains unchanged.

module.exports = Draggable;

 

So the entire module needs to be imported...

// Using a namespace import
import * as Draggable from "gsap/Draggable";

// Which is equivalent to this
import Draggable = require("gsap/Draggable");

 

 

So your imports should look like this.

 

import { Component, OnInit }from '@angular/core';

// Put your eases here. 
import { TweenMax, TimelineMax, Power1, Bounce, Linear } from 'my-business-gsap';

import * as CustomEase from 'my-business-gsap/CustomEase';

import * as $ from "jquery";

 

[apploud 2 Likes (Newbie)]

Thank you so much, It is simple and working perfectly

[OSUblake 9,990 Likes (Superhero)]

Here's a demo showing that syntax with Angular and webpack.

https://www.webpackbin.com/bins/-KkaJTiZGn7M-kgh7htF

 

And another demo using SystemJS, but using the default syntax.

https://plnkr.co/edit/D0bnRSxdClBXUR8Absw7?p=preview

 

To use the default syntax, you need to change the module to "system", and allow synthetic default imports in your tsconfig

"module": "system",
"allowSyntheticDefaultImports": true,

 

 

 

[Riaan 3 Likes (Newbie)]

Hey Blake

 

Sorry to hijack this thread, but I have a follow-up questions. I'd tried to use your demo as a base to see if I can finally get ScrollToPlugin to work, but to no avail:

https://www.webpackbin.com/bins/-Klu-I3TDSqrPjDnCE85

 

Could I ask for your help to try figure this out? I've read everything I could, but still can't figure this out.

[OSUblake 9,990 Likes (Superhero)]

Hi @Riaan

 

This is interesting. I'm wondering if it has to do with some type of lazy loading? If I log ScrollToPlugin out first, then it will work.

import * as ScrollToPlugin from "gsap/ScrollToPlugin";

// Now it will work
console.log(ScrollToPlugin)

 

It might be better to just import stuff without any names if you're only going to use it as plugin.

import "gsap/ScrollToPlugin";

 

https://www.webpackbin.com/bins/-KlwGMyfautcZGvq5kR2

 

[Riaan 3 Likes (Newbie)]

Hey @OSUblake, you are a genius. Thank you! Now I'm not on the verge of a mental breakdown anymore