Resolving the "JavaScript Heap Out of Memory" Error in Angular Using Bold Reports

When working with large-scale Angular applications integrated with Bold Reports, you may encounter the “JavaScript heap out of memory” error during build or serve operations. This error occurs when the Node.js process exceeds its default memory limit, resulting in a process crash. This article explains the cause of this error and offers practical solutions to resolve it by increasing Node.js memory allocation.

Cause

Node.js, which powers the Angular CLI, has a default memory limit of approximately 1.5GB to 2GB, depending on system architecture (32-bit or 64-bit). Large Angular projects, particularly those embedding complex reporting components like Bold Reports, can exceed this limit during memory-intensive operations such as:

• ng build (building the application)
• ng serve (running the development server)
• ng run (executing custom scripts)

When memory demand exceeds the allocated limit, Node.js throws a “JavaScript heap out of memory” error, stopping the process.

Solution

To resolve this issue, you can increase the memory allocated to Node.js by setting the --max_old_space_size flag in the NODE_OPTIONS environment variable. This flag allows you to specify the maximum heap size (in megabytes) for the Node.js process.

Below are step-by-step instructions for various operating systems:

Windows

1. Open Command Prompt or PowerShell.
2. Set the NODE_OPTIONS environment variable to allocate more memory (e.g., 10GB or 10240MB).
3. Run the desired Angular CLI command.

Example: Allocate 10GB of RAM

set NODE_OPTIONS=--max_old_space_size=10240
ng build

macOS/Linux

1. Open a terminal.
2. Export the NODE_OPTIONS environment variable to increase the memory limit.
3. Execute the Angular CLI command.

Example: Allocate 10GB of RAM

export NODE_OPTIONS=--max_old_space_size=10240
ng build

Permanent Configuration (Optional)

To avoid setting the environment variable repeatedly, you can configure it permanently:

• Windows: Add the environment variable via System Settings:

  1. Go to System Properties > Advanced > Environment Variables.
  2. Under System Variables, create or edit NODE_OPTIONS with the value --max_old_space_size=10240.

• macOS/Linux: Add the export command to your shell configuration file:

  1. Edit ~/.bashrc, ~/.zshrc, or ~/.bash_profile (depending on your shell).
  2. Add the line: export NODE_OPTIONS=--max_old_space_size=10240.
  3. Save the file and run source ~/.bashrc (or the relevant file) to apply changes.

Using a Package Script

Alternatively, you can modify the package.json scripts to include the memory allocation for specific commands.

Example: Update package.json

"scripts": {
  "build": "node --max_old_space_size=10240 ./node_modules/@angular/cli/bin/ng build",
  "serve": "node --max_old_space_size=10240 ./node_modules/@angular/cli/bin/ng serve"
}

Run the modified scripts using:

npm run build
npm run serve