Skip to content
This repository was archived by the owner on May 1, 2020. It is now read-only.

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

Open
Bengejd opened this issue May 2, 2018 · 56 comments
Open

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

Bengejd opened this issue May 2, 2018 · 56 comments

Comments

@Bengejd
Copy link

Bengejd commented May 2, 2018

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.

@ayaka209
Copy link

ayaka209 commented May 3, 2018

+1 here, tried to add max_old_space_size parameter, upgrade @ angular-devkit/build-optimizer,
,..
still spends much time

@bnfrnz
Copy link

bnfrnz commented May 3, 2018

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...

@ayaka209
Copy link

ayaka209 commented May 3, 2018

@bnfrnz thank you. but --aot --minifyjs --minifycss --release also takes much time on webpack. ( 400s )

I write a webpack.config.js and force it use ionic dev config for prod now: (./config/webpack.config.js)

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
module.exports = function () {
  let defaultConfig = useDefaultConfig;
  defaultConfig["prod"] = defaultConfig["dev"];
	return defaultConfig;
};

then it takes 80s (--prod) instead of 2000s+ (--prod without any change)

( do not forget to add config to package.json )

  "config": {
    "ionic_bundler": "webpack",
    "ionic_webpack": "./config/webpack.config.js"
  },

just a workaround.

my app takes 30s+ on startup if I don't use aot.

@Bengejd
Copy link
Author

Bengejd commented May 4, 2018

@bnfrnz thanks for the tip, I tried it just now, and it seems to be running the build as it's supposed to. Kind of a bummer that it doesn't work with --prod, but oh well. Best regards!

@Stradivario
Copy link

Whaat @ayaka209 if you do this you will get JUST DEV so no need to run --prod argument :D whats the purpose ?

I have the same problem like you i try to put heap size on node more than 12 GB and Ionic consume all of it... but the build didn't succeed....

@Stradivario
Copy link

#1429

@ayaka209
Copy link

ayaka209 commented May 5, 2018

@Stradivario benefit from aot and less build time than --aot

@Stradivario
Copy link

@ayaka209 i am sure you are talking about "benefit from --prod"

AOT - Ahead of Time Compilation (remove all unused imports)
PROD - Only minify, concat, uglify without TreeShaking the bundle

My suggestion is try to use both --aot and --prod this will give you faster load of your application.

Regards,
Kristiyan Tachev

@ayaka209
Copy link

ayaka209 commented May 5, 2018

@Stradivario no, just aot. after replacing webpack config, concat, minify uglify is not done. they spend too much time..

@leonavas
Copy link

leonavas commented May 7, 2018

+1

1 similar comment
@Demi-ob
Copy link

Demi-ob commented May 9, 2018

+1

@audacitus
Copy link

@bnfrnz I really owe you a beer. I can't thank you enough for this workaround.

I have a project of about 20+ lazy loaded pages and had this issue using --prod after upping the memory to 12gb and waiting 2+ hours, I can confirm using --aot --minifyjs --minifycss vs prod workaround works for both web and android. I'm sure they'll fix it soon, but this works for me for now.

Thanks again!

@Demi-ob
Copy link

Demi-ob commented May 9, 2018

+1

1 similar comment
@LouAdrien
Copy link

+1

@LouAdrien
Copy link

I was able to get the live deploy working by editing the package.json script (following the previous mentioned fix) like this :

  "scripts": {
...
    "build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",
...
  },

However I would feel much better when a fix comes and I can just put back the normal --prod setup

@nsaldarriagagluky
Copy link

+1

@freddiandrew
Copy link

any update fix this issue?
i still can`t build with --prod.

what is the benefit using this :
"build": "ionic-app-scripts build --aot --minifyjs --minifycss --release",

if we compare with --prod?

@Bengejd
Copy link
Author

Bengejd commented May 18, 2018 via email

@bvamos
Copy link

bvamos commented May 19, 2018

I had the same problem yesterday. After several month of development --prod builds stopped without any error message. Last message was:
[21:38:15] copy finished in 18.14 s

After hours of looking for the problem, I've found this in C:\Users\user.ionic\daemon.log:

[ERROR] [2018-05-18T19:40:46.800Z] Could not get latest version of ionic.
...
[ERROR] [2018-05-19T07:49:24.325Z] An error occurred while running npm view ionic dist-tags.latest --json (exit code 1):
...
"summary": "getaddrinfo ENOTFOUND my-internal-npm-repo:443",
...

After I've fixed the connection to my internal npm repo, it works again.

Now log says:

[2018-05-19T07:51:43.216Z] Writing 7432 to daemon pid file (.\daemon.pid).
[2018-05-19T07:51:43.229Z] Spinning up communication server on port 53818.
[2018-05-19T07:51:43.518Z] Writing 53818 to daemon port file (.\daemon.port).
[2018-05-19T07:51:59.741Z] Writing daemon file.

I understand that my situation with internal npm proxy is not usual, but the point is that it is not always related to memory handling.

@GuilhermeBCC
Copy link

+1
Probably a problem with Webpack 3.
As Ionic 3 will not receive any more updates, what we have left is to wait for Ionic 4 or to build a slower and longer build with the above solution.

@ze-termica
Copy link

Who are getting the --prod freeze are using googlemaps too? I beleave that this problem is related with googlemaps.

@GuilhermeBCC
Copy link

GuilhermeBCC commented May 21, 2018

Hello, I have a solution.
comment the line:

function getProdLoaders() {
  if (process.env.IONIC_OPTIMIZE_JS === 'true') {
     //return optimizedProdLoaders; <==
  }
  return devConfig.module.loaders;
}

in node_modules/@ionic/app-scripts/config/webpack.config.js
run the command normally:
ionic cordova android --prod --release

@mfahrul
Copy link

mfahrul commented May 23, 2018

This issue begin after [email protected] & 4.13.1
downgrade your firebase to [email protected].
You can also use the latest [email protected] and downgrade your @firebase/database to @firebase/[email protected]

This issue is on their github

@bnfrnz
Copy link

bnfrnz commented May 25, 2018

@GuilhermeBCC, I suspect what you're doing there is just a complicated approach to omitting the flag --optimizejs.

@mfahrul, thanks so much for referencing the issue from the firebase-js-sdk repo. This finally did the trick for me. Been fighting this for weeks.

For everyone who is using Firebase Realtime Database in their project, I highly recommend pinning your version to @firebase/[email protected] and checking if that solves the problem, as advised by mfahrul.

I have no idea what updates have been made to @firebase/database between version 0.2.1 which was released 2 months ago and today. So I'm not actually sure which solution is better, downgrading or leaving out the optimizejs script during build.

@ze-termica, I'm not using googlemaps but it may still cause the problem in your case. Google's typings and libs are all over the place, unfortunately. Maybe try downgrading it as well and see if the issue was introduced in a recent version, as it happened in the case of firebase.

@GuilhermeBCC
Copy link

GuilhermeBCC commented May 25, 2018

Firebase again. Firebase is a headache.

@bnfrnz Do you think it best to omit the flag --prod and send it to production ??
I crawled and found where the problem is that is in the optimization of Ionic. I tested it and if you do it will have the same apk as before. To write this for sure you have not tested and verified the difference.

@mfahrul
Copy link

mfahrul commented May 25, 2018

@GuilhermeBCC
No, Firebase is not a headache. I've been playing with firebase for a while and i think its a powerful platform. Honestly i prefer to use native npm firebase package on ionic instead of angularfire. I am not agree to omit the --prod flag to send the apk for production release. In my experiences, there is a speed difference between production and debug version of apk. Apk generated with --prod is much faster then debug version because it is optimized. So omitting the --prod or commenting the optimizedProdLoaders is not the best solution.

@sengoontoh
Copy link

+1

@dharapvj
Copy link

dharapvj commented Jul 14, 2018 via email

@nurul1a
Copy link

nurul1a commented Jul 18, 2018

Same issue.

If you want to look into my source code, you can download here: https://goo.gl/bpdtfk

(I explained my issue in detail here: https://forum.ionicframework.com/t/ionic-build-freezes-after-copy-finished-in/135640

@bnfrnz
Copy link

bnfrnz commented Jul 22, 2018

@everyone: Updating @angular-devkit/build-optimizer finally fixed it for me. Have a look at this comment and give it a try.

@saryuvc
Copy link

saryuvc commented Jul 23, 2018

I have updated the app-scripts,web pack,angular 4 to 6 but still the problem persist.

@jayordway
Copy link

@saryuvc Did you just update app-scripts and not update the version of the angular-devkit/build-optimizer that it leverages?

@saryuvc
Copy link

saryuvc commented Jul 23, 2018

yes i have updated the app scripts from 3.1.0 to 3.1.11.

@jayordway
Copy link

jayordway commented Jul 23, 2018

@saryuvc That wouldn't update the build-optimizer though. You have to update that in the ionic-script's package.json itself and npm install @angular-devkit/build-optimizer

@saryuvc
Copy link

saryuvc commented Jul 23, 2018

ok let me try..thank you for reply

@saryuvc
Copy link

saryuvc commented Jul 23, 2018

Hello @jayordway i have updated the angular-devkit/build-optimizer in ionic-script's package.json and app's package.json. the build time is approximate 1 hour and 35 min from 2.5 hour.please note i have 30 up different modules with different pages.i have removed all the modules and with centralised module the prod release build time is 4 mins. so i think it is a issue of lazy loaded page. also , M not using firebase.

any solution ? please help me for same

This is my package.json

"dependencies": {
"@angular-devkit/build-optimizer": "0.6.8",
"@angular/common": "6.0.9",
"@angular/compiler": "6.0.9",
"@angular/compiler-cli": "6.0.9",
"@angular/core": "6.0.9",
"@angular/forms": "6.0.9",
"@angular/http": "6.0.9",
"@angular/platform-browser": "6.0.9",
"@angular/platform-browser-dynamic": "^6.0.9",
"@ionic-native/app-center-crashes": "^4.10.0",
"@ionic-native/call-number": "^4.10.0",
"@ionic-native/camera": "^4.10.0",
"@ionic-native/clipboard": "^4.10.0",
"@ionic-native/contacts": "^4.10.0",
"@ionic-native/core": "4.10.0",
"@ionic-native/crop": "^4.10.0",
"@ionic-native/file": "^4.10.0",
"@ionic-native/google-plus": "^4.10.0",
"@ionic-native/in-app-browser": "^4.10.0",
"@ionic-native/keyboard": "^4.10.0",
"@ionic-native/linkedin": "^4.10.0",
"@ionic-native/native-storage": "^4.10.0",
"@ionic-native/network": "^4.10.0",
"@ionic-native/sms": "^4.10.0",
"@ionic-native/social-sharing": "^4.10.0",
"@ionic-native/splash-screen": "4.10.0",
"@ionic-native/status-bar": "4.10.0",
"@ionic-native/themeable-browser": "^4.10.0",
"@ionic/storage": "^2.1.3",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"android": "0.0.8",
"call-number": "^1.0.1",
"clipboard": "^2.0.1",
"cordova-android": "7.0.0",
"cordova-clipboard": "^1.2.1",
"cordova-plugin-appcenter-crashes": "^0.1.7",
"cordova-plugin-appcenter-shared": "^0.1.7",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-contacts": "^3.0.1",
"cordova-plugin-crop": "^0.4.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-ionic-keyboard": "^2.1.2",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-network-information": "^2.0.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-themeablebrowser": "^0.2.17",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.4.1",
"cordova-sms-plugin": "^0.1.11",
"cordova-sqlite-storage": "^2.3.3",
"es6-promise-plugin": "^4.2.2",
"ionic-angular": "3.9.2",
"ionic-select-searchable": "^2.8.1",
"ionicons": "4.2.4",
"jquery": "^3.3.1",
"mime-types": "^2.1.19",
"mx.ferreyra.callnumber": "0.0.2",
"ng2-translate": "^5.0.0",
"raven-js": "^3.26.3",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "2.7.2",
"ws": "5.2.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-sms-plugin": {},
"cordova-plugin-contacts": {},
"cordova-plugin-x-socialsharing": {},
"cordova-plugin-themeablebrowser": {},
"cordova-sqlite-storage": {},
"cordova-plugin-network-information": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-camera": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-crop": {},
"mx.ferreyra.callnumber": {},
"call-number": {},
"cordova-clipboard": {},
"cordova-plugin-file": {},
"cordova-plugin-appcenter-crashes": {}
},

@Bengejd
Copy link
Author

Bengejd commented Jul 24, 2018

So I opened this issue 84 days ago, and we still haven't had it addressed by the Ionic team, unfortunately. Running the following works (for me anyways). This seems to be an issue with large apps with multiple modules (as one would want for lazy loading purposes) as mentioned here, and firebase after a certain version which was addressed here as an ionic issue that Firebase was inadvertandly causing.

npm install @angular-devkit/[email protected]
npm install [email protected]
npm install @ionic/[email protected]
node --max-old-space-size=8192 (You can play around with this number).

After running these commands, it finishes the webpack portion of the build in about 120s. And then continues through the rest of it without a hitch. My project has roughly lazy loaded 70+ modules in it. I'll post my current package.json below so that you can compare the packages you have to mine. This seems to be working with [email protected] just fine.

"dependencies": {
    "@angular-devkit/build-optimizer": "^0.6.8",
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/base64": "^4.10.0",
    "@ionic-native/camera": "4.3.3",
    "@ionic-native/camera-preview": "^4.10.0",
    "@ionic-native/core": "4.9.1",
    "@ionic-native/file": "^4.10.0",
    "@ionic-native/geolocation": "^4.10.0",
    "@ionic-native/google-maps": "^4.9.1",
    "@ionic-native/keyboard": "^4.10.0",
    "@ionic-native/onesignal": "^4.10.0",
    "@ionic-native/splash-screen": "4.9.1",
    "@ionic-native/status-bar": "4.9.1",
    "@ionic/pro": "^1.0.20",
    "@ionic/storage": "2.1.3",
    "algoliasearch": "^3.29.0",
    "angularfire2": "^5.0.0-rc.11",
    "animate.css": "^3.6.1",
    "bourbon": "^5.1.0",
    "branch-cordova-sdk": "^3.0.0",
    "build": "0.1.4",
    "clg-color": "^1.1.2",
    "com-badrit-base64": "^0.2.0",
    "cordova-ios": "4.5.4",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-camera-preview": "git+https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview.git",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.3.8",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-photo-library": "^2.1.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "date-fns": "^1.29.0",
    "firebase": "^5.3.0",
    "geofirestore": "^1.2.0",
    "hammerjs": "^2.0.8",
    "ionic-angular": "3.9.2",
    "ionic-image-loader": "^5.0.5",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "lodash": "^4.17.10",
    "minimist": "^1.2.0",
    "ng-click-outside": "^4.0.0",
    "onesignal-cordova-plugin": "^2.4.1",
    "rxjs": "^5.5.11",
    "rxjs-compat": "^6.2.2",
    "sw-toolbox": "3.6.0",
    "xml2js": "^0.4.19",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.11",
    "@types/node": "^10.5.2",
    "typescript": "~2.6.2",
    "webpack": "^3.11.0"
  },
  "config": {
    "ionic_sass": "./config/sass.config.js"
  }

Just for continuity, here is my sass.config.js that could help speed up some build times (but not by a ton, I don't believe.


// https://www.npmjs.com/package/node-sass

module.exports = {

  /**
   * outputFilename: The filename of the saved CSS file
   * from the sass build. The directory which it is saved in
   * is set within the "buildDir" config options.
   */
  outputFilename: process.env.IONIC_OUTPUT_CSS_FILE_NAME,

  /**
   * sourceMap: If source map should be built or not.
   */
  sourceMap: false,

  /**
   * outputStyle: How node-sass should output the css file.
   */
  outputStyle: 'expanded',

  /**
   * autoprefixer: The config options for autoprefixer.
   * Excluding this config will skip applying autoprefixer.
   * https://www.npmjs.com/package/autoprefixer
   */
  autoprefixer: {
    browsers: [
      'last 2 versions',
      'iOS >= 8',
      'Android >= 4.4',
      'Explorer >= 11',
      'ExplorerMobile >= 11'
    ],
    cascade: false
  },

  /**
   * includePaths: Used by node-sass for additional
   * paths to search for sass imports by just name.
   */
  includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/bourbon/core'
    // 'node_modules/bourbon/app/assets/stylesheets'
  ],

  /**
   * includeFiles: An array of regex patterns to search for
   * sass files in the same directory as the component module.
   * If a file matches both include and exclude patterns, then
   * the file will be excluded.
   */
  includeFiles: [
    /\.(s(c|a)ss)$/i
  ],

  /**
   * excludeFiles: An array of regex patterns for files which
   * should be excluded. If a file matches both include and exclude
   * patterns, then the file will be excluded.
   */
  excludeFiles: [
    /*  /\.(wp).(scss)$/i  */
  ],

  /**
   * variableSassFiles: Lists out the files which include
   * only sass variables. These variables are the first sass files
   * to be imported so their values override default variables.
   */
  variableSassFiles: [
    '{{SRC}}/theme/variables.scss'
  ],

  /**
   * directoryMaps: Compiled JS modules may be within a different
   * directory than its source file and sibling component sass files.
   * For example, NGC places it's files within the .tmp directory
   * but doesn't copy over its sass files. This is useful so sass
   * also checks the JavaScript's source directory for sass files.
   */
  directoryMaps: {
    '{{TMP}}': '{{SRC}}'
  },

  /**
   * excludeModules: Used just as a way to skip over
   * modules which we know wouldn't have any sass to be
   * bundled. "excludeModules" isn't necessary, but is a
   * good way to speed up build times by skipping modules.
   */
  excludeModules: [
    '@angular',
    'commonjs-proxy',
    'core-js',
    'ionic-native',
    'rxjs',
    'zone.js'
  ]

};

@sameer05k21a0440
Copy link

Hi, When I run my application with ionic serve --lab freeze it like that message
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...
[INFO] Waiting for connectivity with ionic-app-scripts...

@Bengejd
Copy link
Author

Bengejd commented Aug 5, 2018

@sameer05k21a0440 please post your package.json file so we can see what you are running. Did you follow the steps I listed above, and then it began freezing, or is this a seperate issue? If it is, I recommend opening a new issue, because the two are not linked (to my knowledge), though I haven't used ionic serve --lab in quite some time on my app, since It requires native functionality, and I haven't bothered implementing connecting classes quite yet.

@ghost
Copy link

ghost commented Aug 6, 2018

I am stuck here, looks like same issue, can some one point to a solution that works

> ionic-app-scripts build --prod --target cordova --platform android
[13:54:07]  ionic-app-scripts 3.1.11 
[13:54:07]  build prod started ... 
[13:54:08]  clean started ... 
[13:54:08]  clean finished in 16 ms 
[13:54:08]  copy started ... 
[13:54:08]  deeplinks started ... 
[13:54:08]  deeplinks finished in 77 ms 
[13:54:08]  ngc started ... 
[13:54:36]  ngc finished in 28.17 s 
[13:54:36]  preprocess started ... 
[13:54:36]  preprocess finished in 2 ms 
[13:54:36]  webpack started ... 
[13:54:37]  copy finished in 29.07 s 

Ionic info

Ionic:

   ionic (Ionic CLI)  : 4.0.3 
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.0

System:

   Android SDK Tools : 25.2.5
   ios-deploy        : 1.9.1
   ios-sim           : 5.0.8
   NodeJS            : v8.11.3 
   npm               : 6.3.0
   OS                : macOS High Sierra

@ghost
Copy link

ghost commented Aug 6, 2018

For me this worked

ionic cordova build android --aot --uglifyjs --minifyjs --minifycss --release

and takes 30 mins on MAC Book Pro :) good luck if you are on windows :)

@germanriverahdez
Copy link

Just downgrade to [email protected].

This fix the problem for me.

@saryuvc
Copy link

saryuvc commented Aug 31, 2018

Hello,

Please remove www folder,node modules,platforms, and npm install

please note : I have updated to ionic 4 and cordova 8.

this solved my issue.

@ailsoncgt
Copy link

ailsoncgt commented Sep 7, 2018

Tks @germanriverahdez, your solution works for me

@aniciom
Copy link

aniciom commented Oct 31, 2018

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

@adamduren
Copy link

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
Copy link

pipoa commented Nov 11, 2018

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
Copy link

Downgrade solution didn't works for me.

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

Thanks to @bnfrnz

@pradipExicube
Copy link

This issue begin after [email protected] & 4.13.1
downgrade your firebase to [email protected].
You can also use the latest [email protected] and downgrade your @firebase/database to @firebase/[email protected]

This issue is on their github

@mfahrul thanks for the help. Working

@tomavic
Copy link

tomavic commented Oct 19, 2019

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests