Third party ES2015 library causes build to hang/fail/be broken

[RyanHow]

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node --version
v8.11.3

npm --version
6.4.1

ng --version
Angular CLI: 7.0.6
Node: 8.11.3
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.6
@angular-devkit/build-angular     0.10.6
@angular-devkit/build-optimizer   0.10.6
@angular-devkit/build-webpack     0.10.6
@angular-devkit/core              7.0.6
@angular-devkit/schematics        7.0.6
@angular/cli                      7.0.6
@ngtools/webpack                  7.0.6
@schematics/angular               7.0.6
@schematics/update                0.10.6
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Repro steps

git clone https://github.com/RyanHow/angular-cicero-build.git
cd angular-cicero-build
npm install
ng build --prod    <--- This hangs indefinitely
ng build --prod --buildOptimizer=false    <--- This fails
ng build --prod --buildOptimizer=false --optimization=false     <-- This completes

The above is a minimal repo imporing the @accordproject/cicero-core library.
It requires some custom webpack config. So it has @angular-builders/custom-webpack installed with

module.exports = {
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};

The log given by the failure

ng build --prod hangs indefinitely

45% building modules 297/298 modules 1 active ...poser-concerto\lib\introspect\parser.js

ng build --prod --buildOptimizer=false output an error

ERROR in main.abfced9f8456db47574e.js from Terser
Unexpected token: punc ()) [main.abfced9f8456db47574e.js:188444,4]

Desired functionality

I'd like to use the build optimization and optimizer. The bundle sizes are huge without them.
A workaround would be to exclude this library from optimization, or better, from specific forms of optimization causing the issue.

I've successfully used Terser in a react project importing this library, but I don't know what Angular CLI is doing under the hood to trigger the issue. So it is difficult to know where the issue is and what specific options are causing it. Verbose output doesn't really give any more info.

Mention any other details that might be useful

This is a repo with a minimal project
https://github.com/RyanHow/angular-cicero-build

[kzc]

ng build --prod --buildOptimizer=false output an error

ERROR in main.abfced9f8456db47574e.js from Terser
Unexpected token: punc ()) [main.abfced9f8456db47574e.js:188444,4]

Terser is encountering ES that is either invalid or it doesn't know how to parse.

Run this command which presumably disables minification but still runs webpack in production mode:

ng build --prod --buildOptimizer=false --optimization=false <-- This completes

which ought to yield the same input that would have been sent to Terser in the previous failing command. (Note: if webpack is run in development mode it will not yield the same input and may not contain the error.)

You can then manually run each generated js file through the terser CLI for a more detailed error in context. For example:

terser main.abfced9f8456db47574e.js >/dev/null && echo SUCCESS || echo FAIL

Then put that failing generated file into a gist and post the link here.

[RyanHow]

Thanks @kzc

Terser completes successfully. Is there a way to see what options angular-cli is running it with?

[RyanHow]

I've actually managed to work around the terser issue by using a custom builder, extending the webpack config and replacing the optimization using https://github.com/meltedspark/angular-builders

It would be good to see what options angular is running it with so I can tweak it.

[kzc]

Terser completes successfully

That's unfortunate. It indicates that angular or webpack did not produce the same JS which caused the Terser parse error in production mode.

[RyanHow]

That's unfortunate. It indicates that angular or webpack did not produce the same JS which caused the Terser parse error in production mode.

I think it is the options that angular is sending to Terser.

[kzc]

It's a parse error. angular-cli is working with default Terser parse options - the other Terser options don't matter because it's already failed by that point.

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

Lines 207 to 234 in 9f114ae

	const terserOptions = {
	ecma: wco.supportES2015 ? 6 : 5,
	warnings: !!buildOptions.verbose,
	safari10: true,
	output: {
	ascii_only: true,
	comments: false,
	webkit: true,
	},
	// On server, we don't want to compress anything. We still set the ngDevMode = false for it
	// to remove dev code.
	compress: (buildOptions.platform == 'server' ? {
	global_defs: {
	ngDevMode: false,
	},
	} : {
	pure_getters: buildOptions.buildOptimizer,
	// PURE comments work best with 3 passes.
	// See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
	passes: buildOptions.buildOptimizer ? 3 : 1,
	global_defs: {
	ngDevMode: false,
	},
	}),
	// We also want to avoid mangling on server.
	...(buildOptions.platform == 'server' ? { mangle: false } : {}),
	};

You have to obtain the unminified production code that webpack passes to Terser in the failing case.

[kzc]

angular-cli is working with default Terser parse options

I was mistaken. Terser defaults to using parse: { ecma: 8 } to parse trailing commas in function calls. angular-cli uses ecma 5 or 6 as a global override for all parse/compress/mangle/output sub-options. They ought to be set individually.

$ echo 'console.log(1, 2, 3,);' | node-v10.4.1 
1 2 3

$ echo 'console.log(1, 2, 3,);' | terser --ecma 8
console.log(1,2,3);

$ echo 'console.log(1, 2, 3,);' | terser --ecma 6
Parse error at 0:1,20
console.log(1, 2, 3,);
                    ^
ERROR: Unexpected token: punc ())

$ echo 'console.log(1, 2, 3,);' | terser --ecma 6 --parse ecma=8
console.log(1,2,3);

[kzc]

Run

ng build --prod --buildOptimizer=false --optimization=false <-- This completes

and post line 188444 from the file:

ERROR in main.abfced9f8456db47574e.js from Terser
Unexpected token: punc ()) [main.abfced9f8456db47574e.js:188444,4]

[RyanHow]

Thanks! I've found the issue.

The output from angular pre-Terser with optimization=false is different. So I ran terser with --ecma=6 on the unminified output and found a trailing comma in a function call.

Thanks for your help debugging.

Now just to get the build optimizer working :)

[RyanHow]

This may narrow down the build optimizer issue

If you clone the repo in the issue, then run the following command

./node_modules/.bin/build-optimizer node_modules/composer-concerto/lib/introspect/parser.js

It hangs indefinitely