Appflow Build Tips - Excessive Memory Consumption

Update 7/24/2020

The ENOMEM and EPIPE and Terser errors are back and just as nasty as before. Here are some details on how to fix:

Of course, update all Angular build related npm modules
The biggest problem comes from this issue angular/angular-cli#18087 (comment) in copy-webpack-plugin (Fix: webpack-contrib/copy-webpack-plugin#507) which is included in Angular @angular-devkit/build-angular. This fix made it in this week (https://github.com/angular/angular-cli/releases/tag/v8.3.29)

Again, update your npm modules, especially Angular as those are critical.

Summary

I think we uncovered some really helpful things as well. I wanted to summarize my findings after trying all this.

First, I can now successfully build with the standard ng build as well as with node 10. Here's what happened: I spent a while figuring out our app bundle and trying to reduce main.js as far as possible. In the end, we went from a main.js file size of ~7MB to ~2.25MB. I was able to identify some module imports that could be lazy loaded, but bigger than that was how shared components were imported into app.module and app.component. By using an index.ts file in the folder structure, waayyy to many components were being forced into the main.js bundle, same with the lazy loaded modules.

So at the end of the day, what fixed it was a smaller main.js file size. I'm guessing that the memory of the build runner could never handle the large file size, even with the node memory increase.

Also, using Node 12 in Appflow definitely helps if your main.js file size is larger.

Possible Errors

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

ERROR in main.db171b2d9f268f3cb7cf.js from Terser
[15:21:17]: ▸ Error: Call retries were exceeded
[15:21:17]: ▸ at ChildProcessWorker.initialize (/builds/project-0/node_modules/jest-worker/build/workers/ChildProcessWorker.js:230:21)
[15:21:17]: ▸ at ChildProcessWorker._onExit (/builds/project-0/node_modules/jest-worker/build/workers/ChildProcessWorker.js:307:12)
[15:21:17]: ▸ at ChildProcess.emit (events.js:198:13)
[15:21:17]: ▸ at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
[15:21:18]: ▸ npm ERR! code ELIFECYCLE
[15:21:18]: ▸ npm ERR! errno 1
[15:21:18]: ▸ npm ERR! [email protected] build: `BUILD_ENV=${BUILD_ENV:-local} NODE_OPTIONS=--max-old-space-size=16384 ng build --configuration=$BUILD_ENV`
[15:21:18]: ▸ npm ERR! Exit status 1
[15:21:18]: ▸ npm ERR!
[15:21:18]: ▸ npm ERR! Failed at the [email protected] build script.
[15:21:18]: ▸ npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[15:21:18]: ▸ npm ERR! A complete log of this run can be found in:
[15:21:18]: ▸ npm ERR! /root/.npm/_logs/2020-04-29T15_21_18_228Z-debug.log

Appflow bundle file sizes are much bigger than local builds

Possible Causes

Verify you can do a prod build locally
Check first the version of Node.js Appflow is using. Get it as close as possible to your local version. (https://ionicframework.com/docs/appflow/cookbook/switch_node_version)

Check the file size of the main.js bundle - if it's more than 3MB, you likely have problems

	3.1) this could be how you are importing modules

	3.2) also check third party modules

	3.3) also, check for imports into `app.module.ts` (or related level files/components) that reference any `index.ts` files that may be bundling more modules/components than necessary.

Make sure all your npm modules are fully up-to-date!
Spend the time to make the file size smaller. This will greatly help!

Helpful tools

Analyze your code bundles

https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack

webpack-bundle-analyzer for your package.json for a graphical representation.

"bundle-report": "webpack-bundle-analyzer www/stats.json",
"build-prod-with-stats": "ng build --configuration=production --stats-json; npm run bundle-report;"

Increase Node Memory

Use this to increase the memory of the node process for building. Caveat! This likely means there's a bigger underlying issue you should fix.

node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build

Budgets for the build files

https://medium.com/dailyjs/how-did-angular-cli-budgets-save-my-day-and-how-they-can-save-yours-300d534aae7a

Keywords

Appflow build fails

Angular prod build fails

Appflow out of memory

Appflow memory

Angular memory

Increase node memory

angular pull page out of main.js

large main.js file in angular

ENOMEM Angular

Appflow ENOMEM

Appflow Terser

josephm28/appflow-tips.md