angular-cli: touched/untouched not working with ng build --prod

Versions

ng --version

Angular CLI: 1.6.2
Node: 9.3.0
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

Step 1 ng new testProject
Step 2 cd testProject
Step 3 npm install
Step 4 add code in /src/app/app.component.html:

  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
  <!--my code begin-->
  <li>
    <div>
      <label>field</label>
      <input [(ngModel)]="model.field" #field="ngModel"/>
    </div>
  </li>
  <li>
    <div>untouched - {{field.untouched}} </div>
    <div>pristine - {{field.pristine}} </div>
  </li>
  <!--my code end-->

Step 5 add code in /src/app/app.component.ts:

export class AppComponent {
  title = 'app';
  // my code begin
  model = {
    field: ''
  };
  // my code end
}

Step 6 add code in /src/app/app.module.ts:

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; …

  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],

Step 7 npm run build

Observed behavior

wrong

Desired behavior

as after run ng serve: success

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 4
Comments: 39 (15 by maintainers)

Commits related to this issue

fix(@angular/cli): Set uglify plugin minimum to 1.1.5 - Pins uglify-es dependency version on the Webpack side for #8997 — committed to angular/angular-cli by joshwiens 7 years ago
fix(@angular/cli): Set uglify plugin minimum to 1.1.5 - Pins uglify-es dependency version on the Webpack side for #8997 — committed to angular/angular-cli by joshwiens 7 years ago
fix(@angular/cli): Set uglify plugin minimum to 1.1.5 - Pins uglify-es dependency version on the Webpack side for #8997 — committed to d2clouds/speedray-cli by joshwiens 7 years ago

Most upvoted comments

@angular/cli@1.6.3 is now released, which should set the minimum version of uglifyjs-webpack-plugin to use a pinned uglify-es@3.2.2. Big thanks to @d3viant0ne for updating and releasing it 👍

Meanwhile https://github.com/mishoo/UglifyJS2/issues/2663 has also been fixed and should be part of the next release of uglify-es.

+21

filipesilva on Dec 27, 2017

I have slimier problem. If publish site with ‘ng build --prod’, (keydown) and (click) of a input control will not fire. If use ’ ng build --aot --build-optimizer true --output-hashing all --extract-css true --name d-chunks false --sourcemaps false --environment prod’, the events will be fired normally.

cli version: 1.6.2 angular version: 5.1.2

cuiliang on Dec 26, 2017

Why angular cli not fix stable versions of dependency packages in package.json? I think, that this strategy saved all angular builds in the world in this case)

MaxGorshkov on Dec 27, 2017

new UglifyJSPlugin({
    sourceMap: buildOptions.sourcemaps,
    uglifyOptions: {
        ecma: wco.supportES2015 ? 6 : 5,
        warnings: buildOptions.verbose,
        ie8: false,
        // mangle: {
        //     safari10: true,
        // },
        mangle: false,
        compress: uglifyCompressOptions,
        output: {
            ascii_only: true,
            comments: false,
            webkit: true,
        },
    }
}),

Confirmed it can be solved by disable the mangle option in uglifyJS plugin.

trotyl on Dec 26, 2017

@filipesilva => #9006

That moment when serious bouts of insomnia are actually beneficial 😃

This has been pinned in uglifyjs-webpack-plugin to uglify-es@3.2.2 available in uglifyjs-webpack-plugin@^1.1.5

Prior to the next CLI release, anyone having issues should be able to pin the uglifyjs-webpack-plugin to ^1.1.5 and get a working version of uglify-es

joshwiens on Dec 27, 2017

I’m investigating what changed in the uglify output between those two versions.

Meanwhile for those affected you can force install uglify@3.2.2 by running this command:

npm i uglify-es@3.2.2 --save-exact && rm -rf package-lock.json node_modules && npm i && npm ls uglify-es

At the end it should output the following:

+-- @angular/cli@1.6.2
| `-- uglifyjs-webpack-plugin@1.1.2
|   `-- uglify-es@3.2.2  deduped
`-- uglify-es@3.2.2

You can see the right version (3.2.2) version is listed under uglifyjs-webpack-plugin. This is a temporary workaround.

filipesilva on Dec 26, 2017

@MaxGorshkov uglify-es is the sub-dependency of uglify-js-plugin, fixing uglify-js-plugin version will not help with that.

trotyl on Dec 27, 2017

No, the bug is gone with that walk-around (can also be done just by setting mangle=false as suggested above).

dojchek on Dec 27, 2017

@filipesilva Please take a look at the uglify-es commit log for recent changes and bug fixes:

https://github.com/mishoo/UglifyJS2/commits/harmony

All I can suggest is to update to the most recent version and if it still fails then file an uglify issue with a reproducible JS input.

kzc on Dec 26, 2017

@filipesilva our project is also affected. When we deploy, a flag --prod is used. I’ve followed this direction and it helped: https://github.com/angular/angular-cli/issues/8997#issuecomment-353957698 Replacing --prod with list of options eliminates one of the steps that invokes UglifyJS (https://github.com/angular/angular-cli/wiki/build).

mlurker on Dec 26, 2017

@filipesilva uglify-es@3.3.2 would cause the error.

vthinkxie on Dec 26, 2017

@cuiliang, it worked

[edited]: but the chunks size increased a lot 😸 - cannot use it in production

julianobrasil on Dec 26, 2017