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

Created on 27 Dec 2017 · 27Comments · Source: ionic-team/ionic-framework

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.

Source

jennielynshapiro

👍6

Most helpful comment

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 27 Dec 2017

🎉3 👍3

All 27 comments

anatoly-spb on 27 Dec 2017

🎉3 👍3

I can confirm that too. Thanks @anatoly-spb for the hint.

Adding
"uglify-es": "3.2.2"`

to devDependiencies in package.json and npm install helped.

Jetro223 on 27 Dec 2017

+1 My forms also dont work any more

esase on 27 Dec 2017

For reference, the equivalent issue in Angular CLI is https://github.com/angular/angular-cli/issues/8997.

filipesilva on 27 Dec 2017

If this can help, we had the same issue on JHipster, here is our ticket (with the fix at the end): https://github.com/jhipster/generator-jhipster/issues/6910

jdubois on 27 Dec 2017

This has been pinned in uglifyjs-webpack-plugin to [email protected] available in uglifyjs-webpack-plugin@^1.1.5

d3viant0ne on 27 Dec 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 27 Dec 2017

👍5

<---- Ignore me, responded based on another issue comment before I actually looked at the lock file :)

d3viant0ne on 27 Dec 2017

I have same problem with --prod, and adding "uglify-es": "3.2.2" not work for me.
This is my ionic info
`
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 6.0.0

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 5.1.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.2.3
Node              : v6.11.0
npm               : 3.10.10
OS                : Windows 7

Environment Variables:

ANDROID_HOME : C:\Users\win7\AppData\Local\Android\sdk

Misc:

backend : legacy

`
--- help

bigthing33 on 27 Dec 2017

@bigthing33 double check that you call npm install after adding "uglify-es": "3.2.2" in devDependencies to your project package.json file

anatoly-spb on 27 Dec 2017

@anatoly-spb I have followed the indtruction as you said, but it doesn't help.

$ npm ls uglify-es

[email protected] E:\VoBot\VobotApp\vbapp\vbapp
+-- UNMET PEER DEPENDENCY @angular/[email protected] -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@[email protected]@@angular\core
+-- UNMET PEER DEPENDENCY @angular/[email protected] -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@[email protected]@@angular\http
+-- UNMET PEER DEPENDENCY @ionic-native/[email protected] -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@[email protected]@@ionic-native\core
+-- @ionic/[email protected] -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@[email protected]@@ionic\app-scripts
| `-- [email protected]
`-- [email protected]  -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\[email protected]@uglify-es extraneous

npm ERR! peer dep missing: @angular/core@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/core@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/http@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @angular/http@^2.0.0, required by [email protected]
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/[email protected]
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/[email protected]
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/[email protected]
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/[email protected]
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/[email protected]
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/[email protected]
npm ERR! extraneous: [email protected] E:\VoBot\VobotApp\vbapp\vbapp\node_modules\uglify-es

works for me

$cd /{project path}
$npm install @ionic/[email protected] --save-dev --save-exact
$ionic cordova run browser --prod

bigthing33 on 27 Dec 2017

@bigthing33 it is hard to say what is wrong. let me show my versions:

  "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "^4.5.2",
    "@ionic-native/deeplinks": "^4.5.2",
    "@ionic-native/file-transfer": "^4.5.2",
    "@ionic-native/http": "^4.5.2",
    "@ionic-native/network": "^4.5.2",
    "@ionic-native/pin-dialog": "^4.5.2",
    "@ionic-native/push": "^4.5.2",
    "@ionic-native/screen-orientation": "^4.5.2",
    "@ionic-native/secure-storage": "^4.5.2",
    "@ionic-native/splash-screen": "^4.5.2",
    "@ionic-native/status-bar": "^4.5.2",
    "@ionic-native/vibration": "^4.5.2",
    "@ionic/storage": "2.1.3",
    "asmcrypto.js": "0.0.11",
    "class-transformer": "^0.1.8",
    "cordova": "^7.1.0",
    "cordova-plugin-crosswalk-webview": "^2.3.0",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-file-transfer": "^1.7.0",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-screen-orientation": "^2.0.2",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-vibration": "^2.1.6",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.1.3",
    "es6-promise-plugin": "^4.1.1",
    "ionic-angular": "3.9.2",
    "ionic-plugin-deeplinks": "^1.0.15",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "^3.0.0",
    "phonegap-plugin-push": "^2.1.2",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "typescript": "2.4.2",
    "zone.js": "0.8.18",
    "cordova-android": "~6.3.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.6",
    "typescript": "2.4.2",
    "uglify-es": "3.2.2"
  },

anatoly-spb on 27 Dec 2017

Taking a look!

mhartington on 27 Dec 2017

@mhartington the bug in uglify is reported as https://github.com/mishoo/UglifyJS2/issues/2663, with repros included.

filipesilva on 27 Dec 2017

Please confirm that the nightly release of app-scripts works for you. I have tested things locally and it works on my end.

npm i @ionic/app-scripts@nightly

mhartington on 27 Dec 2017

@mhartington I have removed pinned version of uglify-es from my package.json, changed version of ionic/app-scripts to nightly, invoke npm install and tried to run prod on my device and browser:
ionic cordova run android --prod --release works
ionic cordova run browser --prod works

anatoly-spb on 27 Dec 2017

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

npm install @ionic/[email protected] --save-dev --save-exact

Again, thanks @anatoly-spb and @filipesilva

mhartington on 27 Dec 2017

🎉1

@mhartington thank you so much for your time and hot fix release!

anatoly-spb on 27 Dec 2017

@mhartington are [email protected] compatible with ionic 3.71/ 3.8.0 ?
I would like to have a table of compatibility between ionic/app-scripts/angular/typescript....

yurik94 on 28 Dec 2017

It worked for me too:

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

Be sure to put the dependency in DevDependencies not the other.

hbadri1 on 3 Jan 2018

@hussembadri actually it is not needed anymore since hot fix in @ionic/[email protected]

anatoly-spb on 3 Jan 2018

👍1

update to [email protected] does not seem to solve the issue with inputs in my case.
I'm building a PWA.

The following ion-textarea works fine when I build it with ionic build, but when I add the --prod flag, the input does not receive focus (thus you can't type anything into it).

<ion-card>
  <form [formGroup]="notesForm" novalidate> 
    <ion-item>
      <ion-textarea id="notesInput" formControlName="notesText" [placeholder]="defaultText" maxlength="1520" autocomplete="on" autocorrect="on" (ionBlur)="saveNote()"></ion-textarea>
    </ion-item>
  </form>
</ion-card>

System info:

 :)ionic info                                              [1h30m] ✹ ✭
cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

local packages:

    @ionic/app-scripts : 3.1.7
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.4.0
    npm  : 5.3.0
    OS   : macOS Sierra

Misc:

    backend : legacy

I don't have uglify in my dev dependencies:

  "devDependencies": {
    "@ionic/app-scripts": "3.1.7",
    "@types/jasmine": "^2.8.3",
    "@types/node": "^8.5.2",
    "angular2-template-loader": "^0.6.2",
    "html-loader": "^0.5.1",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage-istanbul-reporter": "^1.3.3",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.9",
    "null-loader": "^0.1.1",
    "protractor": "^5.2.2",
    "ts-loader": "^3.2.0",
    "ts-node": "^4.1.0",
    "typescript": "2.4.2"
  },

glennlawyer on 29 Jan 2018

@glennlawyer I'm also having the same issue. Along with that my form is submitting index.html as a network POST. I believe this may be related to uglify not scoping properly. I get this type error when typing within my inputs while the values are not binding. TypeError: Attempted to assign to readonly property

Currently the build that works for me is ionic cordova build ios/android --minifycss --optimizejs --minifyjs --release

cli packages: (/Users/alex/projects/CC3.Mobile/node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 7.0.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v9.4.0
    npm               : 5.6.0 
    OS                : macOS High Sierra
    Xcode             : Xcode 9.2 Build version 9C40b 

Environment Variables:

    ANDROID_HOME : /Users/alex/Library/Android/sdk/

Misc:

    backend : pro

alexmgrant on 11 Feb 2018

Total interaction is broken with the --prod flag, even with @alexmgrant 's solution. The app is just unusable. Keyboard, form inputs, buttons, content scrolling; nothing works. I've tested with all solutions above. Even with different app-scripts versions (3.1.7, 3.1.8), with uglify-es 3.2.2, etc.

@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.7
Cordova Platforms  : android 6.2.1 ios 4.3.1
Ionic Framework    : ionic-angular 3.8.0

System:

Android SDK Tools : 26.1.1
ios-deploy        : 1.9.2 
ios-sim           : 6.1.2 
Node              : v8.11.1
npm               : 5.6.0 
OS                : macOS High Sierra
Xcode             : Xcode 9.3 Build version 9E145

ghost on 18 Apr 2018

Still causing this issue on latest IONIC 3 android 7

ionic info

cli packages: (X:\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v8.10.0
    npm               : 5.8.0
    OS                : Windows 8

Environment Variables:

    ANDROID_HOME : X:\android-sdk

Misc:

    backend : pro

Fayozjon on 21 May 2018

Still happening on ios, also input type=number with pattern="d" is not showing the keyboard.

cli packages: (...../node/v8.9.4/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 7.0.0 browser 5.0.3 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.0.1
    ios-deploy        : 1.9.2
    Node              : v8.9.4
    npm               : 6.1.0
    OS                : macOS High Sierra
    Xcode             : Xcode 9.4 Build version 9F1027a

Environment Variables:

    ANDROID_HOME : /usr/local/share/android-sdk

Misc:

    backend : pro

dfliess on 5 Jun 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.