touched/untouched not working with ng build --prod

[MaxGorshkov]

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

Desired behavior

as after run ng serve:

[julianobrasil]

In fact it seems that more things are not working here. I've commented another issue in Material 2 repo, but I think it's related. Below is the copy of what I posted in Material Repo: angular/components#9120 (comment).

(...) I could reproduce it in a test app, available in heroku. In the images below you can notice that not just the label stops working, but also the interpolation (see the gifs, just beneath the inputs). It doesn't seems to be related just to material... maybe @angular/cli's build-optimizer flag has something to do with it. I noticed the problem using Chrome and Firefox (Windows 10)

without --prod

with --prod

If it helps, the repo for the test app above: https://github.com/julianobrasil/material2-test

Some time after you push to master (it's not protected - anyone can push), the app can be viewed from https://angular-julianobrasil.herokuapp.com/ (it's a free heroku account so it goes to sleep after 30 min idle and takes some time to wake up after someone tries do access it for the first time)

[cuiliang]

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

[julianobrasil]

@cuiliang, I'll try that. But the funny part is that if I compile the project locally (in my Windows 10 machine), it seems to work just fine. When I deploy to heroku (compile remotely), the problem comes up.

[julianobrasil]

@cuiliang, it worked

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

[trotyl]

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.

[filipesilva]

@julianobrasil Thank you for putting up a repro, it helps a lot. I'm trying to see what the issue with it but I don't think I can reproduce... This is what I did:

git clone https://github.com/julianobrasil/material2-test
cd material2-test
npm i
npm run ng -- serve --prod

Then I opened http://localhost:4200/ and interacted with the boxes:

The input box content seems to be reflected outside of it.

@julianobrasil mentioned it doesn't happen locally for him (#8997 (comment)) so maybe that's why it doesn't happen locally for me either.

Other users mentioned disabling Uglify mangle helped. Maybe it is related to the Uglify version. We use uglifyjs-webpack-plugin which internally uses uglify-es. You can check the versions with npm ls uglify-es:

$ npm ls uglify-es
material2-test@0.0.0 D:\sandbox\material2-test
`-- @angular/cli@1.6.2
  `-- uglifyjs-webpack-plugin@1.1.2
    `-- uglify-es@3.2.1

For users that are experiencing this problem, what version of uglify-es is displayed on the machine where the bundle is built?

[vthinkxie]

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