Angular-cli: BuildOptimizer breaks 3rd party library

[alexeagle]

_From @Enngage on May 18, 2018 8:17_

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Area

- [x] devkit
- [ ] schematics

Versions

npm 5.6.0
node v8.9.4
Windows (10

Repro steps

I have this simple angular library repo where I use masonry js library. Everything works perfectly fine (demo) as long as buildOptimizer is disabled:

"buildOptimizer": false

However, as soon as I enable it, some animations (not all!) are broken. I'm pretty confident this is not the issue in the masonry js library, rather it seems like build optimizer might be tampering with the code in some way.

Is there a way to 'disable' build optimizer for this library only? Or could this be part of a bigger problem somewhere?

The log given by the failure

No errors/warnings logged anywhere.

Desired functionality

Don't break code of external libraries.

Mention any other details that might be useful

Angular.json

_Copied from original issue: angular/devkit#937_

[alexeagle]

_From @filipesilva on May 18, 2018 13:57_

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[alexeagle]

_From @Enngage on May 18, 2018 14:39_

Thanks for the response! Sure, I understand - this is the minimal code I could come up with (repo generated with ng new).

To reproduce:

npm i
ng serve --prod

You should see new image appear with no animation each second. When you use either ng --serve or disable the buildOptimizer in angular.json you will see each image nicely appear as expected.

Let me know if you need anything else.

[alexeagle]

_From @clydin on May 21, 2018 16:7_

This is not actually due to the build optimizer itself but rather a minification setting that is enabled when the build optimizer is enabled. Specifically the pure_getters option of UglifyES (here). Either masonry or one of its dependencies is using a property getter that contains side effects; or there is a defect within UglifyES that is improperly removing code).

[alexeagle]

_From @Enngage on May 26, 2018 7:58_

Forgive my ignorance, but I wasn't able to find exactly what the pure_getters actually mean in real world. How would you identify such 'invalid' pure getter?

Isn't there a possibility of excluding libraries from the build optimizer? I think it might make sense for you to be able to specify if some library should be skipped so that you can still leverage build optimizer for the rest of your code.

[michaelbaur]

I guess this is the same problem with pure_getters: true that is discussed in issue 11439, too.

[filipesilva]

Closed via https://github.com/angular/angular-cli/pull/14187

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}