search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.89k stars 13.52k forks source link

bug: ion-input broken with --prod #13718

Closed jennielynshapiro closed 6 years ago

jennielynshapiro commented 6 years ago

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.

anatoly-spb commented 6 years ago

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.

Jetro223 commented 6 years ago

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.

esase commented 6 years ago

+1 My forms also dont work any more

filipesilva commented 6 years ago

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

jdubois commented 6 years ago

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

joshwiens commented 6 years ago

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

anatoly-spb commented 6 years ago

@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"
  },
joshwiens commented 6 years ago

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

bigthing33 commented 6 years ago

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

anatoly-spb commented 6 years ago

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

bigthing33 commented 6 years ago

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

$ npm ls uglify-es

vobot@0.1.0 E:\VoBot\VobotApp\vbapp\vbapp
+-- UNMET PEER DEPENDENCY @angular/core@5.0.0 -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@angular_core@5.0.0@@angular\core
+-- UNMET PEER DEPENDENCY @angular/http@5.0.0 -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@angular_http@5.0.0@@angular\http
+-- UNMET PEER DEPENDENCY @ionic-native/core@4.3.2 -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@ionic-native_core@4.3.2@@ionic-native\core
+-- @ionic/app-scripts@3.1.6 -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_@ionic_app-scripts@3.1.6@@ionic\app-scripts
| `-- uglify-es@3.3.2
`-- uglify-es@3.2.2  -> E:\VoBot\VobotApp\vbapp\vbapp\node_modules\_uglify-es@3.2.2@uglify-es extraneous

npm ERR! peer dep missing: @angular/core@^2.0.0, required by ng2-translate@5.0.0
npm ERR! peer dep missing: @angular/core@^2.0.0, required by ng2-translate@5.0.0
npm ERR! peer dep missing: @angular/http@^2.0.0, required by ng2-translate@5.0.0
npm ERR! peer dep missing: @angular/http@^2.0.0, required by ng2-translate@5.0.0
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/broadcaster@3.14.0
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/deeplinks@3.14.0
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/device@3.14.0
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/email-composer@3.14.0
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/in-app-browser@3.14.0
npm ERR! peer dep missing: @ionic-native/core@^3.6.0, required by @ionic-native/themeable-browser@3.14.0
npm ERR! extraneous: uglify-es@3.2.2 E:\VoBot\VobotApp\vbapp\vbapp\node_modules\uglify-es

works for me

anatoly-spb commented 6 years ago

@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"
  },
mhartington commented 6 years ago

Taking a look!

filipesilva commented 6 years ago

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

mhartington commented 6 years ago

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
anatoly-spb commented 6 years ago

@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

mhartington commented 6 years ago

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

anatoly-spb commented 6 years ago

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

yurik94 commented 6 years ago

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

hbadri1 commented 6 years ago

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.

anatoly-spb commented 6 years ago

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

glennlawyer commented 6 years ago

update to app-scripts@3.1.7 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"
  },
alexmgrant commented 6 years ago

@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
ghost commented 6 years ago

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
Fayozjon commented 6 years ago

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
dfliess commented 6 years ago

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
ionitron-bot[bot] commented 6 years ago

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.