ionic-team / ionic-app-scripts

App Build Scripts for Ionic Projects
http://ionicframework.com/
MIT License
609 stars 300 forks source link

Ionic build --prod freezes after webpack started, copy finished... #1426

Open Bengejd opened 6 years ago

Bengejd commented 6 years ago

Short description of the problem:

When running ionic cordova build ios --prod the command starts running, but then (seemingly) stops after

21:14:41]  build prod started ... 
[21:14:41]  clean started ... 
[21:14:41]  clean finished in 2 ms 
[21:14:41]  copy started ... 
[21:14:41]  deeplinks started ... 
[21:14:41]  deeplinks finished in 311 ms 
[21:14:41]  ngc started ... 
[21:14:57]  ngc finished in 15.79 s 
[21:14:57]  preprocess started ... 
[21:14:57]  preprocess finished in less than 1 ms 
[21:14:57]  webpack started ... 
[21:14:57]  copy finished in 16.44 s 

What behavior are you expecting?

For the build process to continue, like it does when you run ionic cordova build ios

Steps to reproduce:

  1. Run the above mentioned command with the prod flag.

Package.Json

  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@firebase/app": "^0.1.10",
    "@ionic-native/camera": "^4.7.0",
    "@ionic-native/camera-preview": "^4.7.0",
    "@ionic-native/core": "^4.7.0",
    "@ionic-native/diagnostic": "^4.7.0",
    "@ionic-native/geolocation": "^4.7.0",
    "@ionic-native/google-maps": "^4.7.0",
    "@ionic-native/onesignal": "^4.7.0",
    "@ionic-native/photo-library": "^4.7.0",
    "@ionic-native/splash-screen": "^4.7.0",
    "@ionic-native/status-bar": "^4.7.0",
    "@ionic/storage": "^2.1.3",
    "algoliasearch": "^3.26.0",
    "angular2-click-outside": "^0.1.0",
    "angularfire2": "^5.0.0-rc.6",
    "animate.css": "^3.6.1",
    "branch-cordova-sdk": "^2.6.24",
    "cordova-ios": "4.5.4",
    "cordova-plugin-add-swift-support": "^1.7.2",
    "cordova-plugin-camera": "^4.0.2",
    "cordova-plugin-camera-preview": "git+https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
    "cordova-plugin-ionic-webview": "^1.2.0",
    "cordova-plugin-keyboard": "^1.2.0",
    "cordova-plugin-mauron85-background-geolocation": "^2.3.5",
    "cordova-plugin-photo-library": "^2.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.0",
    "cordova.plugins.diagnostic": "^4.0.5",
    "css-animator": "^2.3.0",
    "date-fns": "^1.29.0",
    "firebase": "^4.13.1",
    "firebase-tools": "^3.18.4",
    "geofire": "^4.1.2",
    "geofirestore": "^1.0.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "jimp": "^0.2.27",
    "lodash": "^4.17.5",
    "ng-click-outside": "^3.2.0",
    "ng2-rx-componentdestroyed": "^2.1.0",
    "npm": "^5.8.0",
    "onesignal-cordova-plugin": "^2.3.3",
    "rxjs": "^5.5.10",
    "sharp": "^0.20.1",
    "sw-toolbox": "3.6.0",
    "sweetalert": "^2.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.9",
    "@types/lodash": "4.14.106",
    "typescript": "^2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "branch-cordova-sdk": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "To take photos",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "To select photos"
      },
      "cordova-sqlite-storage": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-add-swift-support": {},
      "cordova-plugin-photo-library": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "To choose photos"
      },
      "cordova-plugin-keyboard": {},
      "cordova-plugin-camera-preview": {},
      "com.googlemaps.ios": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "AIzaSyCqDppTYeY_1kjBBCorBhkscqgJZ1F_lcg",
        "API_KEY_FOR_IOS": "AIzaSyCqDppTYeY_1kjBBCorBhkscqgJZ1F_lcg",
        "LOCATION_WHEN_IN_USE_DESCRIPTION": "To find people nearby",
        "LOCATION_ALWAYS_USAGE_DESCRIPTION": "To find people nearby"
      },
      "cordova-plugin-mauron85-background-geolocation": {
        "ALWAYS_USAGE_DESCRIPTION": "To update your location"
      },
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To find things nearby"
      }
    },
    "platforms": [
      "ios"
    ]
  }
}

Which @ionic/app-scripts version are you using? 3.1.9

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

This was seemingly fixed in the 3.1.9 update of @ionic/app-scripts. But I'm still running into this issue after upgrading from 3.1.8.

aniciom commented 5 years ago

Yep doing npm install latest versions of webpack and build-optimizer seems to be fixing the problem with firebase's libs

adamduren commented 5 years ago

It would be nice to see something from Ionic on this and other V3 related issues. Maybe an update to ionic-app-scripts or a path to use the angular-cli for v3 projects. I've been following many issues, some even with PRs but they seem to get no attention since all of the focus is on V4.

It's unfortunate, because event after the V4 there will be a large portion of the community that will not be able to migrate to V4 even once it's officially released, at least for a period of time. When AngularJS went towards Angular 2 they announced a plan to monitor the community and provide support for AngularJS until Angular 2 hit a certain adoption rate IIRC.

pipoa commented 5 years ago

Some hints to notify eveybody,

  1. NODE_OPTIONS was landed in 8.x+ , if you want to use NODE_OPTIONS, remember to upgrade ur node how to upgrade

  2. in Mac, without 8.x node, what I did is: $ which ionic /usr/local/bin/ionic $ nano /usr/local/bin/ionic at first line , change

    !/usr/bin/env node

    to

    !/usr/bin/env node --max-old-space-size=4096

then, you can compile as usual $ ionic cordova build ios --prod --release $ npm run ionic:build --prod --release

  1. The best way is using NODE_OPTIONS in your .bash_profile, added export NODE_OPTIONS=--max-old-space-size=4096

  2. I DON'T recommend escape --optimizejs, using command below won't reference to you "prod" ENV, if you have one. It runs without webpack 'prodConfig', I don't know what were lost. $ npm run ionic:build --minifyjs --minifycss --release --aot (X not recommended)

  3. How to know that your problem is really caused by Heap Size Limit ? first, run below command without success $ node /usr/local/bin/ionic cordova build android --prod --release run below command with success $ node --max-old-space-size=4096 /usr/local/bin/ionic cordova build android --prod --release

david95thinkcode commented 5 years ago

Downgrade solution didn't works for me.

This one works for me : ionic cordova build android --aot --minifyjs --minifycss --release 🙂

Thanks to @bnfrnz

pradipExicube commented 5 years ago

This issue begin after firebase@4.13.0 & 4.13.1 downgrade your firebase to firebase@4.12.1. You can also use the latest firebase@5.0.3 and downgrade your @firebase/database to @firebase/database@0.2.1

This issue is on their github

@mfahrul thanks for the help. Working

tomavic commented 4 years ago

I'm facing the same issue. Wasted days on trying to build with --prod. Made sure all imports are deep and accurate, increased memory size, stack size... basically tried all the advice I could find in the dozens of prod build related github issues I found across the various related repos... nothing helped. The prod build always freezes and all I can do is kill the process after a few hours.

Unfortunately, the README.md of this repo appears to be a bit outdated and not very helpful. The --cleancss and --uglifyjs flags for example don't seem to be supported by the latest version. I was trying to find out what exactly --prod actually does and it seems to me that it includes --optimizejs. I played around with the options and in my case this optimize script is the one that hangs.

@Bengejd, @ayaka209, If you also can't sort out the --prod build but urgently need a build, try leaving out --optimizejs option. I guess it's not ideal but for me it works and I just couldn't find another way.

Basically, instead of this ionic cordova build ios --prod do this ionic cordova build ios --aot --minifyjs --minifycss --release

Would be great to find out why exactly --optimizejs doesn't work for me and be able to fix it since it is my understanding that it's supposed to bring performance improvements...

This is the most effective answer till today. I confirm