Closed jennielynshapiro closed 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.
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.
+1 My forms also dont work any more
For reference, the equivalent issue in Angular CLI is https://github.com/angular/angular-cli/issues/8997.
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
This has been pinned in uglifyjs-webpack-plugin
to uglify-es@3.2.2
available in uglifyjs-webpack-plugin@^1.1.5
@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"
},
<---- Ignore me, responded based on another issue comment before I actually looked at the lock file :)
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 double check that you call npm install
after adding "uglify-es": "3.2.2" in devDependencies to your project package.json file
@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
@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"
},
Taking a look!
@mhartington the bug in uglify is reported as https://github.com/mishoo/UglifyJS2/issues/2663, with repros included.
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 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
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 thank you so much for your time and hot fix release!
@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....
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.
@hussembadri actually it is not needed anymore since hot fix in @ionic/app-scripts@3.1.7
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"
},
@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
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
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
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
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.
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: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.