Jump to content
Search Community

Angular 6 --build-optimizer fails to find TweenMax

Zuriel 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

https://stackoverflow.com/questions/51123831/ng-build-prod-cannot-set-property-autoactivated-of-undefined

 

That is not my stack overflow question but I had the same issue when I was recently updating my site to Angular6.  Couldn't use the AOT option in Angular6.  I saw somewhere that the next version of GSAP would be modular?   Do you know of any current workarounds or have any more info about what they were saying in that post?  

Edited by Zuriel
AOT isn't the issue, its the new --build-optimizer of angular-cli
Link to comment
Share on other sites

9 hours ago, Zuriel said:

I saw somewhere that the next version of GSAP would be modular?

 

It isn't? Then why are you having problems importing GSAP modules? ?

 

This is at the bottom of the Draggable UMD file. I think it was written before bundling tools like webpack became popular.

 

//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)

 

 

9 hours ago, Zuriel said:

Do you know of any current workarounds or have any more info about what they were saying in that post?  

 

I have no idea what's going on with the AOT compiler. It looks really complicated.

https://angular.io/guide/aot-compiler

 

Are you getting this error?

 

Cannot set property _autoActivated' of undefined

 

 

There's only 1 file where that would happen, but I don't know what would cause the import to fail.

https://github.com/greensock/GreenSock-JS/blob/master/src/esm/TweenMax.js

 

If you're getting that error, that means you're importing from "gsap" or "gsap/TweenMax", which I wouldn't recommend.

https://greensock.com/docs/NPMUsage

 

https://greensock.com/forums/topic/18437-import-from-gsap-vs-from-gsapall/

 

If tree shaking is enabled

 

import { TweenMax, CSSPlugin }  from "gsap/all";

const plugins = [CSSPlugin];

 

Else

 

import "gsap/TweenMaxBase";
import "gsap/CSSPlugin";

 

 

If that doesn't work, you can add GSAP files via the scripts option inside the angular.json file.

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

 

 

 

  • Like 4
Link to comment
Share on other sites

Oddly enough when I try to do 

 

import { TweenMax } from "gsap/all";   I get a module not found error with this message.

 

TS7016: Could not find a declaration file for module 'gsap/all'.  '/Users/Zuriel/Repository/ZA2017/node_modules/gsap/all.js' implicitly has an 'any' type.   Try `npm install @types/gsap` if it exists or add a new declaration (.d.ts) file containing `declare module 'gsap';`

 

So I installed @types/gsap and it still didn't change, so then I just did the declare module'gsap'; in my typings file in angular.  it doesn't work and the Module still doesn't color code correctly in my syntax.   Something doesn't seem right   Also get console errors that it can't find "fromTo"  so tweenmax isn't working

Link to comment
Share on other sites

8 minutes ago, Zuriel said:

So I installed @types/gsap and it still didn't change, so then I just did the declare module'gsap'; in my typings file in angular.  it works but the Module still doesn't color code correctly in my syntax.   so basically the intellisense doesn't work at all.   Something doesn't seem right 

 

It's looking in the declaration file for something called "all", but that doesn't exist.

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap

 

I wonder if you could do something like the index.d.ts.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/gsap/index.d.ts

 

I can't test this at the moment, but maybe something like...

 

declare module 'gsap/all' {
    export = gsap;
}

 

 

If that doesn't work, you could try a triple slash directive.

https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

  • Like 3
Link to comment
Share on other sites

sorry I edited my post as you were replying.  I was saying it doesn't work, not works.

 

so when I do declare module 'gsap/all' { export = gsap; } 

 

it gets rid of the intellisense errors because now all is gsap, but it doesn't work, i stll get errors in the site and no animations work.  

 

the only way i've ever gotten TweenMax to work in the past was a full .min.js include in my scripts, but I get a larger vendor bundle.  

 

build-optimizer is new in Angular6 I believe? not sure I didnt use it in 5 and had no issues but thats the only way i can get it to work but all my file sizes are larger with build-optimizer off.

 

@types/gsap  seems like its for 1.19

 

// Type definitions for GSAP 1.19
// Project: http://greensock.com/
// Definitions by: VILIC VANE <https://vilic.github.io/>, Robert S <https://github.com/codebelt>, Richard Fox <https://github.com/ProbablePrime>, Philip Bulley <https://github.com/philipbulley>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped

/// <reference path="Animation.d.ts"/>
/// <reference path="Ease.d.ts"/>
/// <reference path="TweenConfig.d.ts"/>
/// <reference path="Tween.d.ts"/>
/// <reference path="Timeline.d.ts"/>
/// <reference path="Plugins.d.ts"/>

declare module 'gsap' {
    export = gsap;
}

seems like maybe thats part of the issue, gonna just keep digging i guess

Link to comment
Share on other sites

well regardless, nothing I do makes build-optimizer work.   I turn it off my vendor bundle is 1.2 megs, turn it on its 900k.

 

but the site doesn't work, so either its just dumping the entire tweenmax out completely, or its just not happy with some of the stuff GSAP does so it can't optimize correctly.     

 

Quote

build-optimizer

--build-optimizer

Enables @angular-devkit/build-optimizer optimizations when using the 'aot' option.

 

If anyone has successfully gotten build optimizer to work that is what I am trying to figure out.    

Link to comment
Share on other sites

This is how far I get with --build-optimizer

 

ERROR TypeError: Cannot read property 'fromTo' of undefined

 

 

and this is the first offending result

 

    const sceneIn = new Scene({
      triggerElement: this.heroWrapper,  offset: '0', triggerHook: 0, duration: '100%'
    })
      .setTween(TweenMax.fromTo([this.strip, this.scrollWrapper], 1, {opacity: 1}, {opacity: 0}))
      .addTo(this.aboutSMsc);
  }

 

 

If i don't do build-optimizer = true in my config and i leave it just --aot and --prod, it works but the bundle is larger, etc.   Also using a webpack analyzer TweenMax is in both builds, so its something else that its doing to it.

Link to comment
Share on other sites

ok a bit of a update.

 

I took the super simple approach.   Brand new 100% spanking new blank folder.   Angular-cli

 

ng new my-dream-app

 

went into the single page hello world app, and did 

 

npm install --save gsap

 

 

went into my app component.

 

import { AfterViewInit, Component } from '@angular/core';
import { TweenMax } from 'gsap/all';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'my-dream-app';

  ngAfterViewInit () {
    TweenMax.to('#logo', 10, {x: 500});
  }
}

 

HTML template has #logo as the image.

 

run it.  works fine.

 

ng build --prod --aot --build-optimizer

 

 

and this is the result

 

Navigated to http://localhost:8000/
10:13:51.319 main.5ee00d0bacee9aaa3c86.js:1 ERROR TypeError: Cannot read property 'to' of undefined
    at e.ngAfterViewInit (main.5ee00d0bacee9aaa3c86.js:1)
    at ni (main.5ee00d0bacee9aaa3c86.js:1)
    at ti (main.5ee00d0bacee9aaa3c86.js:1)
    at ei (main.5ee00d0bacee9aaa3c86.js:1)
    at Object.wi [as checkAndUpdateView] (main.5ee00d0bacee9aaa3c86.js:1)
    at e.detectChanges (main.5ee00d0bacee9aaa3c86.js:1)
    at main.5ee00d0bacee9aaa3c86.js:1
    at Array.forEach (<anonymous>)
    at e.tick (main.5ee00d0bacee9aaa3c86.js:1)
    at e._loadComponent (main.5ee00d0bacee9aaa3c86.js:1)

 

Cannot read property 'to' of undefined.  which is TweenMax

 

Is there something I am missing that I need to be doing to get this working?  or are we under the agreement that build-optimizer doesn't work?   and since it doesn't work, is there any workaround to get it to work?     This is a pretty easy test to replicate with angular-cli as it took me about 30 seconds to setup and 1 minute to install angular-cli.   Any takers? :)

Link to comment
Share on other sites

  • 1 month later...

I haven't tried Angular7 so I can't comment on if there is any change there, but for me, I just don't use build-optimizer.  

 

you can see the full list of optimizations that build optimizer does here

 

I am not sure if anyone higher up has time to look at the optimizations build optimizer does and see if there are any workarounds or can give us any more insight

Link to comment
Share on other sites

TweenLite is the base file that all the other files import from, and it seems to be working correctly. You can check what's installed by logging this out.

 

console.log((window as any).com.greensock);

 

Everything else like the CSSPlugin, TweenMax, TimelineLite, TimelineMax, etc ends up being undefined in the build. I have no idea what the build optimizer is doing to cause those problems. My guess is that Angular doesn't like the way TweenLite works with the Window object.

 

I think your best bet is to add GSAP files to scripts in your angular.json file if you want to use the build optimizer. I didn't check, but you may need to use the umd versions for that.

 

  • Like 2
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...