Ionic-app-scripts: JavaScript heap out of memory

Created on 12 Jun 2017 · 63Comments · Source: ionic-team/ionic-app-scripts

Hi there,

I read in another issue that this should had been solved, before so I tried removing the:
"node --max-old-space-size=8192 workaround from my project but still have the same problem. The stack-trace and ionic info bellow. Let me know if anything else is needed.

ionic info

global packages:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 6.5.0
Ionic CLI        : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.1.2 browser 4.1.0 ios 4.3.1
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.0
ios-sim    : 5.0.13

ionic cordova build ios --prod --verbose

[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-cordova
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
Running app-scripts build: --prod --iscordovaserve --externalIpRequired --nobrowser

[20:08:46] build prod started ...
[20:08:46] clean started ...
[20:08:46] clean finished in 1 ms
[20:08:46] copy started ...
[20:08:46] ngc started ...
[20:09:19] ngc finished in 32.84 s
[20:09:19] preprocess started ...
[20:09:19] deeplinks started ...
[20:09:22] deeplinks finished in 3.67 s
[20:09:22] optimization started ...
[20:09:39] copy finished in 52.56 s
[20:10:04] optimization finished in 41.73 s
[20:10:04] preprocess finished in 45.40 s
[20:10:04] webpack started ...

<--- Last few GCs --->

402717 ms: Mark-sweep 1332.3 (1437.1) -> 1331.6 (1437.1) MB, 1137.5 / 0.0 ms [allocation failure] [GC in old space requested].
403827 ms: Mark-sweep 1331.6 (1437.1) -> 1331.5 (1437.1) MB, 1109.4 / 0.0 ms [allocation failure] [GC in old space requested].
404969 ms: Mark-sweep 1331.5 (1437.1) -> 1340.4 (1421.1) MB, 1141.3 / 0.0 ms [last resort gc].
406115 ms: Mark-sweep 1340.4 (1421.1) -> 1349.5 (1421.1) MB, 1145.4 / 0.0 ms [last resort gc].

<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x3253a08cfb51
2: /* anonymous */ [/Users/Valter/projects/8sec-front-end/node_modules/source-map/lib/source-node.js:~80] [pc=0x40b1c23c541] (this=0x9c85c680801 )
3: arguments adaptor frame: 3->1
4: InnerArrayForEach(aka InnerArrayForEach) [native array.js:~935] [pc=0x40b1becab8b] (th...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [/usr/local/bin/node]
2: node::FatalException(v8::Isolate, v8::Local, v8::Local) [/usr/local/bin/node]
3: v8::internal::V8::FatalProcessOutOfMemory(char const, bool) [/usr/local/bin/node]
4: v8::internal::Factory::NewUninitializedFixedArray(int) [/usr/local/bin/node]
5: v8::internal::(anonymous namespace)::ElementsAccessorBase >::ConvertElementsWithCapacity(v8::internal::Handle, v8::internal::Handle, v8::internal::ElementsKind, unsigned int, unsigned int, unsigned int, int) [/usr/local/bin/node]
6: v8::internal::(anonymous namespace)::ElementsAccessorBase >::GrowCapacityAndConvertImpl(v8::internal::Handle, unsigned int) [/usr/local/bin/node]
7: v8::internal::Runtime_GrowArrayElements(int, v8::internal::Object*, v8::internal::Isolate) [/usr/local/bin/node]
8: 0x40b17d079a7
9: 0x40b17d2e9c5
10: 0x40b1c23c541
Abort trap: 6

Source

ValterSantosMatos

👍23 👎1

Most helpful comment

Thanks @speedfl, my issue is also a big app. Maybe would be useful to debug if we could find a way to quantify what a "big" app is... Dunno if running the ionic build command with --verbose could also output the bundle size. Waiting for the Ionic team for some feedback on this.
Btw the way we solve it is:

add this to the package.json scripts
"ionic:build": "node --max-old-space-size=8192 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build",
run the command:
npm run ionic:build --prod
run the commands:
cordova build android --release
cordova build ios --release

ValterSantosMatos on 22 Jun 2017

👍38 🎉14 😕6

All 63 comments

I also have the same problems

xiexin36 on 17 Jun 2017

👍6

Hello
I just spent hours to understand what was the origin of the issue for me.
The problem is maybe due to two things:

presence of "ionic_source_map_type": "#inline-source-map" => this needs to be removed before build prod
a huge app (with lot of pages) . This was my last case.

I tried several stuff like:

#!/usr/bin/env node --max-old-space-size=4096 in the ionic-app-scripts.js
and other stuff (I don't remember because I tried so many stuff)

The only which worked for me. Modify:

node_modules/.bin/ionic-app-scripts.cmd

By adding:

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\@ionic\app-scripts\bin\ionic-app-scripts.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=4096  "%~dp0\..\@ionic\app-scripts\bin\ionic-app-scripts.js" %*
)

I am on windows. So if you are on linux I guess you have to modify node_modules/.bin/ionic-app-scripts with this:

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node --max_old_space_size=4096"  "$basedir/../@ionic/app-scripts/bin/ionic-app-scripts.js" "$@"
  ret=$?
else
  node --max_old_space_size=4096 "$basedir/../@ionic/app-scripts/bin/ionic-app-scripts.js" "$@"
  ret=$?
fi
exit $ret

However this is a tweak. It could be nice to pass this environment variable like this:

ionic build android --prod --release --max_old_space_size=4096

Last thing. In some cases it is --max_old_space_size and for other it is --max-old-space-size based on your node version. To check the format you can type node --v8-options

Keep me posted if it is working for you.

speedfl on 22 Jun 2017

👍10 🎉1

I just noticed that the origin of the issue is the need of the workaround. Sorry.
But you can check the "ionic_source_map_type": "#inline-source-map" because it caused me lot of issues

speedfl on 22 Jun 2017

add this to the package.json scripts
"ionic:build": "node --max-old-space-size=8192 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build",
run the command:
npm run ionic:build --prod
run the commands:
cordova build android --release
cordova build ios --release

ValterSantosMatos on 22 Jun 2017

👍38 🎉14 😕6

For my app I found the critic threshold.
Just removing some comment in my html files maked the build working. Keeping them maked the build failed

speedfl on 22 Jun 2017

👍2

same issue here. problem started after adding a big google library

mamartins on 8 Aug 2017

As I mentioned in the other issue:
this clearly happens with big project and as suggested by the others having an ionic parameter like: --max_old_space_size would greatly help.
In my case I modified the first line of /bin/ionic

!/bin/node --max_old_space_size=4096

NB: shebang in linux accepts only one parameter so #!/usr/bin/env node --max_old_space_size=4096` won't work

yelhouti on 27 Sep 2017

Same issue as #1076

With the angular-cli some persons face the same issue too https://github.com/angular/angular-cli/issues/5618

P.S.: Like I said in #1076, I don't face the problem with app-scripts 2.1.4 bus only as of 3.0.0 (probably due to the webpack update, just a wild guess)

peterpeterparker on 28 Sep 2017

@ValterSantosMatos
thk ,i resolve it use your method.

FreezeSoul on 16 Oct 2017

👍1

@ValterSantosMatos Thanks your work around solved my issue. Also by doing this I had enough memory to show what I think was causing the issue which was typescript. I ended upgrading to typescript to 2.6.1 and I finally can build my production version of my project.

bkarv on 11 Nov 2017

👍1

@ValterSantosMatos i tried the steps as you mentioned, but while running this command npm run ionic:build --prod my pc started hanging and the build was still in progress since from the last half n hour, would please suggest me a solution, my app script version @ionic/app-scripts": "3.1.9" and typescript "typescript": "^2.8.3"

MidhunSai on 3 May 2018

Hi @MidhunSai looks like you have the wrong typescript version, can you try with the same the ionic team uses: ionic conference app

ValterSantosMatos on 3 May 2018

i have the same problem and can't make prod build and can't use ionic pro live deployment . tried the steps above and others but failed. i have to release a new version for app stores. please help.
i have only 20 pages and 5 modals. used angular router for page navigation.

node version - v10.0.0
npm version - 6.0.0
ionic version - 3.20.0

package.json:

"scripts": {
    "start": "ionic-app-scripts serve",
    "build": "ionic-app-scripts build --prod"
  },
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/cli": "^1.7.4",
    "@angular/common": "^5.2.9",
    "@angular/compiler": "^5.2.9",
    "@angular/core": "^5.2.9",
    "@angular/forms": "^5.2.9",
    "@angular/http": "^5.2.9",
    "@angular/platform-browser": "^5.2.9",
    "@angular/platform-browser-dynamic": "^5.2.9",
    "@angular/router": "^5.2.9",
    "@ionic-native/app-minimize": "^4.6.0",
    "@ionic-native/app-version": "^4.6.0",
    "@ionic-native/barcode-scanner": "^4.7.0",
    "@ionic-native/call-number": "^4.6.0",
    "@ionic-native/core": "^4.6.0",
    "@ionic-native/device": "^4.6.0",
    "@ionic-native/diagnostic": "^4.6.0",
    "@ionic-native/facebook": "^4.6.0",
    "@ionic-native/fcm": "^4.7.0",
    "@ionic-native/geolocation": "^4.7.0",
    "@ionic-native/google-analytics": "^4.6.0",
    "@ionic-native/google-plus": "^4.6.0",
    "@ionic-native/in-app-browser": "^4.6.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/network": "^4.6.0",
    "@ionic-native/nfc": "^4.6.0",
    "@ionic-native/social-sharing": "^4.6.0",
    "@ionic-native/splash-screen": "^4.6.0",
    "@ionic-native/status-bar": "^4.6.0",
    "@ionic-native/twitter-connect": "^4.6.0",
    "@ionic/app-scripts": "^3.1.9",
    "@ionic/cli-plugin-cordova": "^1.6.2",
    "@ionic/pro": "^1.0.20",
    "@ionic/storage": "^2.1.3",
    "@types/google-maps": "3.2.0",
    "angular2-qrcode": "^2.0.1",
    "angularfire2": "^5.0.0-rc.6",
    "cordova-android": "7.1.0",
    "cordova-ios": "4.5.4",
    "cordova-plugin-add-swift-support": "^1.7.2",
    "cordova-plugin-advanced-geolocation": "https://github.com/esri/cordova-plugin-advanced-geolocation.git",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-appminimize": "^1.0.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-facebook4": "^1.7.4",
    "cordova-plugin-fcm": "^2.1.2",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-google-analytics": "^1.8.3",
    "cordova-plugin-googleplus": "^5.3.0",
    "cordova-plugin-inappbrowser": "^2.0.2",
    "cordova-plugin-ionic": "^4.1.6",
    "cordova-plugin-ionic-webview": "^1.2.0",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-networkinterface": "^2.0.0",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-swift-support": "^3.1.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.3.2",
    "cordova.plugins.diagnostic": "^4.0.5",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^4.12.1",
    "font-awesome": "^4.7.0",
    "ionic-angular": "^3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "^3.0.0",
    "ng2-translate": "^5.0.0",
    "ngx-cookie": "^3.0.1",
    "node-js-marker-clusterer": "^1.0.0",
    "phonegap-nfc": "^0.7.1",
    "phonegap-plugin-barcodescanner": "^7.0.2",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.10",
    "sw-toolbox": "^3.6.0",
    "twitter-connect-plugin": "^0.6.0",
    "zone.js": "^0.8.24"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.2.9",
    "@types/node": "^9.6.1",
    "autoprefixer": "^8.2.0",
    "tslint": "^5.9.1",
    "tslint-eslint-rules": "^5.1.0",
    "typescript": "^2.6.1"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "description": "maxiloyal-ui: An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-appminimize": {},
      "cordova-plugin-device": {},
      "twitter-connect-plugin": {
        "FABRIC_KEY": "xxxxxxxxxx"
      },
      "cordova-plugin-app-version": {},
      "cordova-plugin-network-information": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-x-socialsharing": {},
      "phonegap-nfc": {
        "NFC_USAGE_DESCRIPTION": "Read NFC Tags"
      },
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "xxxxxxxxx"
      },
      "cordova-plugin-ionic-webview": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-compat": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "xxxxxxxx",
        "APP_NAME": "myapp"
      },
      "cordova-plugin-advanced-geolocation": {},
      "cordova-plugin-networkinterface": {},
      "cordova-plugin-fcm": {},
      "cordova-plugin-add-swift-support": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic": {
        "APP_ID": "xxxxxxxx",
        "CHANNEL_NAME": "Master",
        "UPDATE_METHOD": "none",
        "WARN_DEBUG": "false",
        "UPDATE_API": "https://api.ionicjs.com",
        "MAX_STORE": "2"
      },
      "cordova-plugin-google-analytics": {},
      "phonegap-plugin-barcodescanner": {
        "CAMERA_USAGE_DESCRIPTION": " "
      }
    },
    "platforms": [
      "ios",
      "android"
    ]
  },
  "platforms": [
    "android",
    "ios"
  ],
  "config": {
    "ionic_webpack": "./webpack.config.js"
  }

i am using custom webpackconfig.js file.

var path = require('path');
var webpack = require('webpack');
const defaultPath = path.join(process.env.IONIC_APP_SCRIPTS_DIR, 'config', 'webpack.config.js');
var env = "dev";
for (var i in process.argv) {
    var arg = process.argv[i];
    if (arg.indexOf('--env=') > -1) {
        env = arg.split('=')[1];
    }
}
if (env === 'dev') {
    env = process.argv.indexOf('--env') !== -1 ? process.argv[process.argv.indexOf('--env') + 1] : "dev";
}
var plugin = new webpack.DefinePlugin({
    'process.env': {
        'MAXI_ENV': JSON.stringify(env)
    }
});
var defaultConfig = require(defaultPath);
defaultConfig.dev.plugins.push(plugin);
defaultConfig.prod.plugins.push(plugin);

error message.

[18:10:39]  webpack started ... 
[18:10:40]  copy finished in 8.41 s 

<--- Last few GCs --->

[81373:0x102802400]   746108 ms: Mark-sweep 1390.5 (1447.9) -> 1390.5 (1447.9) MB, 4580.5 / 0.0 ms  allocation failure GC in old space requested
[81373:0x102802400]   750924 ms: Mark-sweep 1390.5 (1447.9) -> 1390.5 (1431.9) MB, 4815.4 / 0.0 ms  last resort GC in old space requested
[81373:0x102802400]   755693 ms: Mark-sweep 1390.5 (1431.9) -> 1390.5 (1431.9) MB, 4769.1 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x7b74a88427d]
Security context: 0x29fb074206a9 <JSObject>
    1: symbolToParameterDeclaration(aka symbolToParameterDeclaration) [/Users/okanseremet/Repos/maxiloyal-ui/node_modules/typescript/lib/typescript.js:~26283] [pc=0x7b74b784ac1](this=0x29fbaee822e1 <undefined>,parameterSymbol=0x29fb01244941 <SymbolObject map = 0x29fbdeee67f1>,context=0x29fbd3f022a1 <Object map = 0x29fb33006261>)
    2: signatureToSignatureDec...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 2: node::FatalTryCatch::~FatalTryCatch() [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 4: v8::internal::Handle<v8::internal::LoadHandler> v8::internal::Factory::New<v8::internal::LoadHandler>(v8::internal::Handle<v8::internal::Map>, v8::internal::AllocationSpace) [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 5: v8::internal::LoadHandler::LoadFullChain(v8::internal::Isolate*, v8::internal::Handle<v8::internal::Map>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Smi>) [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 6: v8::internal::LoadIC::UpdateCaches(v8::internal::LookupIterator*) [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 7: v8::internal::LoadIC::Load(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Name>) [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 8: v8::internal::Runtime_LoadIC_Miss(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/okanseremet/.nvm/versions/node/v10.0.0/bin/node]
 9: 0x7b74a88427d
10: 0x7b74b784ac1

okandeb on 3 May 2018

Same problem here:

It just happens !! I was debugging in production and in 4 or 5 builds it just started to consume ALL memory no matter how much --max_old_space_size i set it consumes all of it :D build never happens and i am stuck.IONIC is the new JAVA VM --max_old_space_size=16000

Stradivario on 4 May 2018

Arti3DPlayer on 6 May 2018

Same. here. I've upped the --max_old_space_size=12000. I waited 3 hours only to get the same out of memory message.

I don't know if loading all my lazy loaded pages (22+) will solve the problem, but i'm out of options as I really need the lazy loading. I've updated my CLI (3.19), app-scripts (3.19) and typescript (2.6.2) to the latest recommended, as well as followed ionic doctor. I'm currently on a project with a deadline one month and half away, and I'm really hoping this could be sorted out before then.

audacitus on 7 May 2018

@audacitus

I manage to make it work with the following versions

    "postinstall": "cd ./node_modules/ && mkdir gapi-angular-client && cp -r ./@gapi/angular-client/* ./gapi-angular-client",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "build:prod:aot": "ionic build --prod --aot",
    "start:docker": "docker-compose up -d --force-recreate",
    "build:docker": "docker build -t juice/mobile/aot:latest ."
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@gapi/angular-client": "^0.7.172",
    "@ionic-native/background-geolocation": "^4.7.0",
    "@ionic-native/core": "^4.7.0",
    "@ionic-native/facebook": "^4.7.0",
    "@ionic-native/geolocation": "^4.7.0",
    "@ionic-native/google-maps": "^4.7.0",
    "@ionic-native/location-accuracy": "^4.7.0",
    "@ionic-native/onesignal": "^4.7.0",
    "@ionic-native/secure-storage": "^4.7.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/pro": "1.0.20",
    "@ionic/storage": "2.1.3",
    "@types/node": "^9.6.6",
    "angularfire2": "^5.0.0-rc.6.0",
    "cordova-android": "7.1.0",
    "cordova-browser": "5.0.3",
    "cordova-ios": "4.5.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-facebook4": "git+https://github.com/amritk/cordova-plugin-facebook4.git",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.2.9",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.2.0",
    "cordova-plugin-mauron85-background-geolocation": "^2.3.5",
    "cordova-plugin-request-location-accuracy": "^2.2.2",
    "cordova-plugin-secure-storage": "^2.6.8",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "firebase": "^4.12.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "ngx-cache-layer": "^1.6.2",
    "onesignal-cordova-plugin": "^2.3.3",
    "rxjs": "5.5.8",
    "subscriptions-transport-ws": "^0.9.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "typescript": "~2.6.2"
  },

Also if you modify default npm run ionic:build and specify parameters like --prod --aot inside this particular script it will not work.I thik the problem is also related with that app-scripts uses internal to run "npm run ionic:build"

Hope this helpa

Stradivario on 7 May 2018

Hi @Stradivario Thanks for the feedback. How many pages are you lazy loading? I have 22 (more coming) with 2 imported components.

Going through your package.json, are you referring to the "build:prod:aot": "ionic build --prod --aot", my package isn't too different from yours. I've pasted it below. Is there something i'm missing?

{
  "name": "SomeApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "node --max-old-space-size=4096 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/storage": "2.1.3",
    "firebase": "^4.12.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "ngx-chips": "^1.8.2",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

audacitus on 7 May 2018

👍2

Leonavas on 7 May 2018

For those with large apps, I tried using @bnfrnz 's suggestion at #1426 to use:

--aot --minifyjs --minifycss

instead of --prod

and I succeeded in completing my build in ~10-15mins, what normally took 2+hrs

I know it might not be ideal to leave out --optimizejs. But as he pointed out, leaving that seems to be the workaround for now.

audacitus on 9 May 2018

👍11 ❤2

Arti3DPlayer on 16 May 2018

fthkrtl on 17 May 2018

+1 This seems like this issue has (RE)reared it's ugly head.

SteveKennedy on 18 May 2018

👍2

Error When creating Blank Ionic Project

`cli packages: (/usr/local/lib/node_modules)

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

System:

Node : v8.11.2
npm  : 5.6.0 
OS   : macOS High Sierra

Misc:

backend : pro`

`sh-3.2# ionic start mobHiveActive

? What starter would you like to use: blank

? The directory mobHiveActive contains file(s) that could conflict. Would you like to overwrite the directory with this new project? Yes
✔ Creating directory ./mobHiveActive - done!
✔ Downloading and extracting blank starter - done!

? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes
✔ Personalizing ionic.config.json and package.json - done!

ionic integrations enable cordova --quiet
✔ Downloading integration cordova - done!
✔ Copying integrations files to project - done!
[OK] Added cordova integration!

Installing dependencies may take several minutes.

✨ IONIC DEVAPP ✨

Speed up development with the Ionic DevApp, our fast, on-device testing mobile app

🔑 Test on iOS and Android without Native SDKs
🚀 LiveReload for instant style and JS updates

️--> Install DevApp: https://bit.ly/ionic-dev-app <--

npm i
⠙ Running command
<--- Last few GCs --->

[3013:0x103000000] 348397 ms: Mark-sweep 1349.1 (1407.8) -> 1349.1 (1407.8) MB, 1971.8 / 0.0 ms allocation failure GC in old space requested
[3013:0x103000000] 350017 ms: Mark-sweep 1349.1 (1407.8) -> 1349.1 (1376.3) MB, 1620.2 / 0.0 ms last resort GC in old space requested
[3013:0x103000000] 351571 ms: Mark-sweep 1349.1 (1376.3) -> 1349.1 (1376.3) MB, 1553.8 / 0.0 ms last resort GC in old space requested

<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x3302de0a5879
1: /* anonymous */ [/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-utils/lib/utils/shell.js:~44] [pc=0x3fe6b5c51c5c](this=0x3302fb8a1a69 ,chunk=0x3302bfdea011 )
2: emit [events.js:~156] [pc=0x3fe6b5c4cdd6](this=0x3302fb8a1a69 ,type=0x3302de0b5909 )
3: arguments adapt...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node::Abort() [/usr/local/bin/node]
2: node::FatalException(v8::Isolate, v8::Local, v8::Local) [/usr/local/bin/node]
3: v8::internal::V8::FatalProcessOutOfMemory(char const, bool) [/usr/local/bin/node]
4: v8::internal::Factory::NewUninitializedFixedArray(int) [/usr/local/bin/node]
5: v8::internal::(anonymous namespace)::ElementsAccessorBase >::GrowCapacity(v8::internal::Handle, unsigned int) [/usr/local/bin/node]
6: v8::internal::Runtime_GrowArrayElements(int, v8::internal::Object*, v8::internal::Isolate) [/usr/local/bin/node]
7: 0x3fe6b5a842fd
8: 0x3fe6b5c51c5c
9: 0x3fe6b5c4cdd6
10: 0x3fe6b5a8535f`

batto77 on 23 May 2018

RadW2020 on 4 Jun 2018

hamal-ho on 7 Jun 2018

mburger81 on 15 Jun 2018

renearias on 22 Jun 2018

markterrill on 22 Jun 2018

MichaelHuy on 24 Jun 2018

Hi everyone, I solved this issues install firebase again.
npm i [email protected] --save
Don't know why I must run that command again through It is added correctly on package.json file
"firebase": "^4.12.1",

MichaelHuy on 25 Jun 2018

❤4 🎉1

Any other solution for this?
I am not having firebase dependancy. Does it related to package.json dependancies

HardikDG on 26 Jun 2018

peterlai107 on 26 Jun 2018

In my case, downgrading firebase version solved my problem. Thank you so much @MichaelHuy

IvanLencina on 27 Jun 2018

Here is my working answer for the issue. It fixed it for myself, but as we all know. A solution for some may not be a solution for many.

Bengejd on 24 Jul 2018

This is happening to me on a particular project when [email protected] is installed. Downgrading to 3.20.0 makes the OOM go away.

pavel-zdenek on 1 Aug 2018

👍1

I am using the naive plugin of FCM. and I am getting the same error. This issue is ugly as they come.

berginGeorge on 8 Aug 2018

rodrigoords on 9 Aug 2018

liangwenzhong on 16 Aug 2018

3m0 on 27 Aug 2018

ExSoax on 14 Sep 2018

this sort of blows my mind :-D is there no professional investigation going on to try and figure out where this massive memory leak is coming from? Or did someone just add arr=[];while (true){arr.push("foo");} somewhere to troll people?

pascalwhoop on 16 Sep 2018

@pascalwhoop I think the reason this isn't being investigated is that it's a wide range of issues that culminate to cause this. It was investigated by the Firebase team and ultimately deemed to be an Ionic issue that Firebase is inadvertently causing. This seems to have been corrected (for me anyway) by using this solution that I documented, a few comments above.

Bengejd on 16 Sep 2018

This ultimately comes down to the --optimizejs flag, running out of memory. If you ommit that flag instead, and use the following command, the build will go through. But using my solution, you will be able to use the optimizejs flag.

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

Bengejd on 16 Sep 2018

👍4

And I assume the optimizejs does the tree shaking (or whatever its called now) which goes through the module tree and since this is a huge tree, its not working out so well right? I fear there is some tweak that needs to be done that causes the complexity to not explode exponentially with increasing tree node count.

pascalwhoop on 16 Sep 2018

Yes, you are correct. optimizejs does do tree-shaking, along with a few other optimizations. The code can be found here if you're curious what else it does. I am not sure what tweak could be done to fix the issue, just due to it being a fairly simple implementation as is.

Bengejd on 16 Sep 2018

I've found a solution which was pointed out in an old message on the forum: https://forum.ionicframework.com/t/3-7-0-ios-build-with-prod-not-working/107061/24

Open node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js

Change the first line from:
#!/usr/bin/env node
into
#!/usr/bin/env node --max-old-space-size=4096

I tried values 1024 and 2048, but for my relatively large app I needed 4096.

Now I am able to run ionic cordova build android --prod --release with out the FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory error.

Posted this solution in #1467, #1036 and #1247

basvdijk on 5 Oct 2018

👍1

@basvdijk basically you are facing the same problem ;)

If you do that is not different than

node --max-old-space-size=8192 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build

Stradivario on 5 Oct 2018

@Stradivario It is different, I've tried your command but the result was a significantly larger .apk file than before. 6.9MB over 5.4MB. Modifying the ionic-app-scripts.jswas the only way to get the 5.4MB version. I also fiddled around with the flags but none resulted in the same apk file size.

basvdijk on 5 Oct 2018

👍1

I ment the part with heap size

Stradivario on 5 Oct 2018

Found a better solution, to specify NODE env variable before the build: export NODE_OPTIONS=--max-old-space-size=4096

Credits to: https://stackoverflow.com/a/48895989/4919972

kirillgroshkov on 2 Nov 2018

👍5 🎉1

Thanks @speedfl, my issue is also a big app. Maybe would be useful to debug if we could find a way to quantify what a "big" app is... Dunno if running the ionic build command with --verbose could also output the bundle size. Waiting for the Ionic team for some feedback on this.
Btw the way we solve it is:

add this to the package.json scripts
"ionic:build": "node --max-old-space-size=8192 ./node_modules/@ionic/app-scripts/bin/ionic-app-scripts.js build",

run the command:
npm run ionic:build --prod

run the commands:
cordova build android --release
cordova build ios --release

None of the options worked,
Even if you put all the available memory in the computer, the error happens

eliesner on 24 Nov 2018

👍1

@pascalwhoop I think the reason this isn't being investigated is that it's a wide range of issues that culminate to cause this. It was investigated by the Firebase team and ultimately deemed to be an Ionic issue that Firebase is inadvertently causing. This seems to have been corrected (for me anyway) by using this solution that I documented, a few comments above.

I have used your solution, but sadly seems that I am stuck in another issue, doesn't matter if I do --prod --release or anything, the IOS version does not release the .xcodeproj file.
What do know what else to do.

guifeliper on 26 Nov 2018

This did the magic for me:
node --max-old-space-size=4096 $(which ionic) cordova build android --prod --aot --minifyjs --minifycss --optimizejs

PetsoJava on 4 Dec 2018

👍2

After spending so much time on searching here and there to tackle this issue I came across this thread and with the help of some above comments I was able to resolve it. Here are the detailed steps along with the images which I did:

I went to: Users⁩ ▸ ⁨{YourUser} ▸ ⁨GitHub⁩ ▸ {YourIonicAppPath} ▸ ⁨node_modules⁩ ▸ ⁨@ionic⁩ ▸ ⁨app-scripts⁩ ▸ ⁨bin⁩

Removed the first line: "#!/usr/bin/env node" and replaced it with:

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

After making the above change I was able to build the ionic app for both the platforms without any error:

ionic cordova build ios --prod --release

ionic cordova build android --prod --release

At very this moment I have the following versions:

ionic -v: CLI 4.6.0
node -v: 10.14.2
npm -v: 6.4.1
cordova -v: 8.1.2

raghav-axero on 24 Dec 2018

👍1

I managed to fix this by increasing the max RAM available to the node process:
(On macOS) put this in your ~/.bashrc

export NODE_OPTIONS=--max_old_space_size=2048

And open a new terminal to make sure the settings have been set by executing echo $NODE_OPTIONS. Just make sure you don't overdo it/have enough RAM left for your other applications.

Alex-Sessler on 15 Mar 2019

👍1

After spending so much time on searching here and there to tackle this issue I came across this thread and with the help of some above comments I was able to resolve it. Here ate the detailed steps along with the images which I did:

I went to: Users⁩ ▸ ⁨{YourUser} ▸ ⁨GitHub⁩ ▸ {YourIonicAppPath} ▸ ⁨node_modules⁩ ▸ ⁨@Ionic⁩ ▸ ⁨app-scripts⁩ ▸ ⁨bin⁩

Removed the first line: "#!/usr/bin/env node" and replaced it with:

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

After making the above change I was able to build the ionic app for both the platforms without any error:

ionic cordova build ios --prod --release

ionic cordova build android --prod --release

At very this moment I have the following versions:

ionic -v: CLI 4.6.0
node -v: 10.14.2
npm -v: 6.4.1
cordova -v: 8.1.2

If you are using a CI environment, then this solution will not work. We need a permanent fix for this from the Ionic team. Again, solutions exist to bypass this issue, but once you automate your builds stuff gets complicated. Our current solution is to fix @firebase/database to version 0.2.1 and wait for an Ionic fix.

jprinsloo on 17 Apr 2019

😕1 👍1

For my app I found the critic threshold.
Just removing some comment in my html files maked the build working. Keeping them maked the build failed

A little bit awkward but I confirm that html comment can create memory leak

mngoe on 9 May 2019

I'm seeing this issue but when I build the browser version for prod.
We have multiple apps the share the node_modules folder. Two other apps browser build for production worked this one failed.
removed node_modeules and add them back. removed browser platform and added it back.
This app is on the smaller size compared to our others ones.
Update the max old space didn't not seem to fix it.

newuser44 on 4 Jun 2019

nothing of all solutions worked for me.... i dont have a large app or html comments either...

lreiner on 21 Jun 2019

I am trying to create the ionic build with Jenkins getting error with command
ENV=staging ionic cordova build browser --aot --prod
JavaScript heap out of memory jenkin build
can anyone help??

tarunmishra592 on 25 Aug 2019

Can anyone please tell that how to resolve the JavaScript heap out of memory issue in ionic 5 as it does not have @ionic/app-scripts. How to resolve this issue? Any help would be appreciated.

fizaict on 19 Nov 2019

Hello
I just spent hours to understand what was the origin of the issue for me.
The problem is maybe due to two things:

presence of "ionic_source_map_type": "#inline-source-map" => this needs to be removed before build prod

a huge app (with lot of pages) . This was my last case.

I tried several stuff like:

#!/usr/bin/env node --max-old-space-size=4096 in the ionic-app-scripts.js
and other stuff (I don't remember because I tried so many stuff)

The only which worked for me. Modify:

node_modules/.bin/ionic-app-scripts.cmd

By adding:
@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\@ionic\app-scripts\bin\ionic-app-scripts.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=4096  "%~dp0\..\@ionic\app-scripts\bin\ionic-app-scripts.js" %*
)
I am on windows. So if you are on linux I guess you have to modify node_modules/.bin/ionic-app-scripts with this:
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  "$basedir/node --max_old_space_size=4096"  "$basedir/../@ionic/app-scripts/bin/ionic-app-scripts.js" "$@"
  ret=$?
else
  node --max_old_space_size=4096 "$basedir/../@ionic/app-scripts/bin/ionic-app-scripts.js" "$@"
  ret=$?
fi
exit $ret
However this is a tweak. It could be nice to pass this environment variable like this:

ionic build android --prod --release --max_old_space_size=4096

Last thing. In some cases it is --max_old_space_size and for other it is --max-old-space-size based on your node version. To check the format you can type node --v8-options

Keep me posted if it is working for you.