ionic-framework: bug: ion-input broken with --prod

Type: bug

Ionic Version: 3.9.2

Platform: all

After building with --prod an <ion-input> inside an <ion-item> will no longer bind using ngModel or update styling in response to input events.

Using: node v8.9.3 npm v5.5.1 Ionic CLI v3.19.0 Ionic-Angular v3.9.2

Tested on both mac and windows

Step 1) Install Ionic: npm install -g cordova ionic

Step 2) Create blank app: ionic start myApp blank

Step 3) add the following code to <ion-content> of home.html:

  <ion-item>
	<ion-input [(ngModel)]="foo"></ion-input>
  </ion-item>
  <p>{{foo}}</p>

Step 4) test it in development mode (works fine): ionic serve

Step 5) test it in production mode: ionic cordova run browser --prod

The ngModel binding of {{foo}} will no longer work. Also the color underline styling of the <ion-input> will no longer work. The underline will not turn blue when focused.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 6
Comments: 27 (3 by maintainers)

Commits related to this issue

Fixed https://github.com/ionic-team/ionic/issues/13718 — committed to anatoly-spb/ionic-app-scripts by anatoly-spb 7 years ago

Most upvoted comments

Confirmed. I think it is broken because of ionic/app-scripts uses new version uglify-es (“3.3.2” instead of “3.2.2”). Here is difference between working and non-working build from my CI server: https://pastebin.com/mjJeWeNi

As the result ionic is very dangerous to use in production because without changing anything from your side (code, config.xml, package.json) you can get broken production build as it was in my case. In my case the broken version has been deployed to production channel and supplied to my customers.

anatoly-spb on Dec 27, 2017

@jdubois @d3viant0ne it does not help because ionic/app-scripts uses direct dependence and unpined version:

  "dependencies": {
    "@angular-devkit/build-optimizer": "0.0.32",
    "autoprefixer": "^7.1.6",
    "chalk": "^2.3.0",
    "chokidar": "^1.7.0",
    "clean-css": "^4.1.9",
    "cross-spawn": "^5.1.0",
    "express": "^4.16.2",
    "fs-extra": "^4.0.2",
    "glob": "^7.1.2",
    "json-loader": "^0.5.7",
    "node-sass": "~4.5.3",
    "os-name": "^2.0.1",
    "postcss": "^6.0.13",
    "proxy-middleware": "^0.15.0",
    "reflect-metadata": "^0.1.10",
    "rollup": "0.50.0",
    "rollup-plugin-commonjs": "8.2.6",
    "rollup-plugin-node-resolve": "3.0.0",
    "source-map": "^0.6.1",
    "tiny-lr": "^1.0.5",
    "tslint": "^5.8.0",
    "tslint-eslint-rules": "^4.1.1",
    "uglify-es": "^3.1.6",
    "webpack": "3.6.0",
    "ws": "^3.2.0",
    "xml2js": "^0.4.19"
  },

in our case the possible workaround is pinning version in our projects package.json files as @Jetro223 remarked:

"devDependencies": {
    "@ionic/app-scripts": "3.1.2",
    "typescript": "2.4.2",
    "uglify-es": "3.2.2"
  },

anatoly-spb on Dec 27, 2017

@hussembadri actually it is not needed anymore since hot fix in @ionic/app-scripts@3.1.7

anatoly-spb on Jan 3, 2018

Thanks! Please install the next release of app-scripts.

npm install @ionic/app-scripts@3.1.7 --save-dev --save-exact

Again, thanks @anatoly-spb and @filipesilva

mhartington on Dec 27, 2017