Uglifyjs: uglifyJS 3.3.0+ breaks form submission in AngularJS 5.x+

[ghost]

Bug report

In code compressed with [email protected] Angular form handler (ngSubmit) is not triggered and form submission reloads the page.

Code that handles form submission (ngSubmit) is the same after compression with [email protected] and [email protected], and my code is also the same after compression with both versions, so I have no idea where's the problem.

ES6+ input
The problem is somewhere in Angular 5.1.2 (not in my code).
Input: https://drive.google.com/file/d/1RdvS1-MrWrcLkftkf9CUud6a9lVr77hk/view?usp=sharing
Sorry, I have no idea how to encapsulate the problem to reduce the code.

Angular code to reproduce

import {BrowserModule} from '@angular/platform-browser';
import {Component, NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form #f="ngForm" name="test" (ngSubmit)="submitForm();">
      f.valid = {{f.valid}}
      <button type="submit">Submit form</button>
    </form>
  `
})
export class AppComponent {
  public submitForm(): void {
    console.log('submitForm()');
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Full project: https://drive.google.com/file/d/15XNQesR6EaGzyFWvuIP_n_lhs00EQR2R/view?usp=sharing

Uglify version (uglifyjs -V)
The problem has started happening after release of [email protected].
Code compressed with [email protected] doesn't have the problem

The uglifyjs CLI command executed or minify() options used.
Angular CLI compresses the code using these options:

{
  "ie8": false,
  "ecma": 5,
  "parse": {},
  "mangle": {
    "safari10": true,
    "eval": false,
    "ie8": false,
    "keep_classnames": false,
    "keep_fnames": false,
    "properties": false,
    "reserved": [
      "arguments"
    ],
    "toplevel": false
  },
  "output": {
    "shebang": true,
    "comments": false,
    "beautify": false,
    "semicolons": true,
    "ascii_only": true,
    "webkit": true
  },
  "compress": {
    "typeofs": false,
    "ecma": 5,
    "arrows": true,
    "booleans": true,
    "cascade": true,
    "collapse_vars": true,
    "comparisons": true,
    "computed_props": true,
    "conditionals": true,
    "dead_code": true,
    "drop_console": false,
    "drop_debugger": true,
    "evaluate": true,
    "expression": false,
    "global_defs": {},
    "hoist_funs": true,
    "hoist_props": true,
    "hoist_vars": false,
    "ie8": false,
    "if_return": true,
    "inline": true,
    "join_vars": true,
    "keep_classnames": false,
    "keep_fargs": true,
    "keep_fnames": false,
    "keep_infinity": false,
    "loops": true,
    "negate_iife": true,
    "passes": 1,
    "properties": true,
    "pure_getters": "strict",
    "pure_funcs": null,
    "reduce_funcs": true,
    "reduce_vars": true,
    "sequences": true,
    "side_effects": true,
    "switches": true,
    "top_retain": null,
    "toplevel": false,
    "unsafe": false,
    "unsafe_arrows": false,
    "unsafe_comps": false,
    "unsafe_Func": false,
    "unsafe_math": false,
    "unsafe_methods": false,
    "unsafe_proto": false,
    "unsafe_regexp": false,
    "unused": true,
    "warnings": false
  },
  "warnings": false,
  "sourceMap": null
}

[ghost]

According to https://github.com/angular/angular/issues/21173 the problem is in the mangle option.

[jdubois]

Thanks @maxkorz I've been struggling with this all day (see our ticket here)!! All http://www.jhipster.tech/ builds are affected, and that's quite a lot of people, so I definitely confirm the bug :-)

[ghost]

@jdubois that's why I want https://github.com/npm/npm/issues/19458 to be implemented

[jdubois]

This also breaks Angular (see ticket) and Angular CLI (see ticket), so basically this has broken all Angular builds in the world. Doing a new release fixing the transitive dependency would be nice.

[alexlamsl]

@jdubois looking forward to your Pull Request to fix this issue.

[jdubois]

@alexlamsl done at https://github.com/webpack-contrib/uglifyjs-webpack-plugin/pull/199
(it took me 2 minutes and this is going to help a lot of people, I don't understand why you seem unhappy)

[deepu105]

@alexlamsl why was the issue closed? Was there a fix?

[alexlamsl]

@deepu105 apparently @jdubois fixed it.

[ghost]

@alexlamsl the issue is not fixed. Does it look fixed to you? @jdubois just pointed out that uglifyjs-webpack-plugin should not use the latest minor release of uglify-es, and use exact stable version instead
"uglify-es": "^3.2.1" -> "uglify-es": "3.2.2"

[deepu105]

@alexlamsl no, the PR from @jdubois was a temporary workaround to the upstream plugin, just fixing version to the last release which didn't break this. So the original issue still remains and is breaking all angular applications that use [email protected]

[anatoly-spb]

@alexlamsl please reopen issue, @jdubois only pinned version in concrete project (uglifyjs-webpack-plugin) which uses uglify-es, but there is a lot of projects depends on uglify-es directly, for example ionic framework: https://github.com/ionic-team/ionic/issues/13718

[filipesilva]

The problem causing this behaviour is being tracked in https://github.com/mishoo/UglifyJS2/issues/2663.