How to fix JavaScript heap out of memory in Angular project

I’m working on big enterprise Angular application and we are using Azure DevOps to manage our project. All was running good until one day our build pipeline started falling apart and our builds started failing.

Error log

I’m sure this wouldn’t be such a big problem if our DevOps officer wasn’t away for vacation. It was on me to diagnose and fix this issue. I didn’t had full access to pipeline administration so I couldn’t try and change anything there, all I had were build logs to start my quest. After reading few hundred lines of failed build log file I extracted two lines bellow as most important. So I started my search for solution armed with those two lines and much patience.

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
##[error]Bash exited with code '134'.

Searching for solution

After reading about JavaScript heap out of memory problems on stackoverflow and finding few possible solutions I understood that I need to raise max memory available for NODEJS builds on our pipeline. That required setting up environment variable for NODEJS on our Azure DevOps pipeline. It was easy to do if you have admin access to pipeline and you can set environment variables like on image bellow.

azure devops pipeline configuration

I didn’t had admin access so I couldn’t just add environment variable to pipeline. Next possible solution was that I can fix it by modifying build script and adding new command like on example from stackoverflow:

node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod

So I modified my build file and pushed it but it didn’t make any difference and builds continued to fail with same old error. I tried to modify package.json build command but no matter what I tried nothing worked. I almost gave up when I opened NPMJS and tried to find some package which could solve our problem. After some searching I stumbled upon a cross-env package which looked promising.

cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform. Just set it like you would if it’s running on a POSIX system, and cross-env will take care of setting it properly.


cross-env

Install

Install package in your project.

npm install --save-dev cross-env

Update package.json

After I installed cross-env package I have modified package.json build script by adding cross-env NODE_OPTIONS=–max_old_space_size=8192 before ng build –prod.

 "scripts": {
     "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 ng build --prod"
 }

I pushed my updated package.json file and after few minutes I had a successful build. Tired but happy that I fixed our build pipeline and that we could continue our work as planed I felt a huge relief. I hope this article helped some of you guys and made your quest for solution shorter than it was mine.

Share with your friends