Production build using buildOptimizer is broke but works without buildOptimizer (Angular v6/v7)

[ClemensSchneider]

🐞 bug report

Affected Package

The issue is caused by package @angular-devkit/build-angular (this is my assumption)

Is this a regression?

Hard to tell as build-dependencies changed from Angular v5 to Angular v6 / v7, right?
Building the original v5 application using ng build --prod --build-optimizer=true spit out a working application at least.

Description

Building itself works but when trying to launch the application in the browser, an error is logged to the console:

main.8cc841c62bc65dc4efeb.js:1 Uncaught TypeError: (intermediate value)(intermediate value) is not a function
    at main.8cc841c62bc65dc4efeb.js:1
    at Object.RCq4.e.exports.12.../apply (main.8cc841c62bc65dc4efeb.js:1)
    at i (main.8cc841c62bc65dc4efeb.js:1)
    at main.8cc841c62bc65dc4efeb.js:1
    at main.8cc841c62bc65dc4efeb.js:1
    at main.8cc841c62bc65dc4efeb.js:1
    at Object.RCq4.e.exports.32../lib/Promise (main.8cc841c62bc65dc4efeb.js:1)
    at i (main.8cc841c62bc65dc4efeb.js:1)
    at main.8cc841c62bc65dc4efeb.js:1
    at Object.RCq4.e.exports.1.../callbacks (main.8cc841c62bc65dc4efeb.js:1)

When setting buildOptimizer to false, everything works out as expected (no error is logged and application launches).

🔬 Minimal Reproduction

Check out https://github.com/ClemensSchneider/angular-buildoptimizer-bug/tree/angular7 (or https://github.com/ClemensSchneider/angular-buildoptimizer-bug/tree/angular6 for the Angular v6 version).

Run yarn to install dependencies, then run yarn build to build the production build with buildOptimizer enabled.
Serve the resulting artifacts in dist/build-optimizer-bug with a regular http-server and open the application in the browser. You can see, that it errors out without displaying anything.

Then, turn off buildOptimizer in angular.json and run yarn build again. Open the resulting artifacts in the browser again and see, that everything works as expected.

🔥 Exception or Error

main.8cc841c62bc65dc4efeb.js:1 Uncaught TypeError: (intermediate value)(intermediate value) is not a function
    at main.8cc841c62bc65dc4efeb.js:1
    at Object.RCq4.e.exports.12.../apply (main.8cc841c62bc65dc4efeb.js:1)
    at i (main.8cc841c62bc65dc4efeb.js:1)
    at main.8cc841c62bc65dc4efeb.js:1
    at main.8cc841c62bc65dc4efeb.js:1
    at main.8cc841c62bc65dc4efeb.js:1
    at Object.RCq4.e.exports.32../lib/Promise (main.8cc841c62bc65dc4efeb.js:1)
    at i (main.8cc841c62bc65dc4efeb.js:1)
    at main.8cc841c62bc65dc4efeb.js:1
    at Object.RCq4.e.exports.1.../callbacks (main.8cc841c62bc65dc4efeb.js:1)

🌍 Your Environment

Angular Version (v7):

Angular CLI: 7.2.1
Node: 8.11.1
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.2.1
@angular/cli                      7.2.1
@ngtools/webpack                  7.2.1
@schematics/angular               7.2.1
@schematics/update                0.12.1
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.23.1

Angular Version (v6):

Angular CLI: 6.2.9
Node: 8.11.1
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.9
@angular-devkit/build-angular     0.8.9
@angular-devkit/build-optimizer   0.8.9
@angular-devkit/build-webpack     0.8.9
@angular-devkit/core              0.8.9
@angular-devkit/schematics        0.8.9
@angular/cli                      6.2.9
@ngtools/webpack                  6.2.9
@schematics/angular               0.8.9
@schematics/update                0.8.9
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.16.4

Anything else relevant?

The module on which the build optimization chokes is https://www.npmjs.com/package/autobahn

[ClemensSchneider]

Also see crossbario/autobahn-js#354

[filipesilva]

Heya, was looking into this error and the error happens in ./node_modules/when/dist/browser/when.js, around line 856.

What prompts it is indeed the buildOptimizer option, but not actually the Build Optimizer tool itself. Instead, what causes this is an Uglify/Terser option we set in conjunction with Build Optimizer called pure_getters.

This option affects code removal by signalling that property access has no side effects. We turn this on together with Build Optimizer as part of our suite of advanced optimizations for the smallest bundle size.

In some cases, like this one, this option can break existing code. It's not the first time that it has happened but it has been rare enough, and the savings significant enough, that we keep this option on.

You have a couple of options that address this problem right now:

• you can turn off Build Optimizer
• you can use https://github.com/manfredsteyer/ngx-build-plus/ to customize your webpack config and manually remove the pure_getters option

Whenever we get a report of this happening we reevaluate the current behaviour to see if it's still desirable. I'll bring this up with the team.

[ClemensSchneider]

Thanks for investigating!
I also suspected when to cause the trouble and tried to remove the autobahn module and just add when as import to see if the same error appears. With only when, the issue does not appear.

Will try to add this case to a separate branch for easier reproduction.

[ClemensSchneider]

See https://github.com/ClemensSchneider/angular-buildoptimizer-bug/tree/angular7-whenjs for the same showcase but depending on when only (same version, 3.7.8). With this setup, the issue does not appear.

[filipesilva]

It might be a usage issue though. I don't know how the when library is used inside autobahn (or it's dependencies). It might not happen with just importing the library, but rather when using it in a certain way.

[ClemensSchneider]

Okay, I'll stick to turning off the Build Optimizer for now.
Would it be possible to expose turning off pure_getters as an option to CLI users? I guess this would introduce too much coupling to the internals though, right..

[pkozlowski-opensource]

@filipesilva what is the next actionable step here? Should we move it to the CLI repo?