Sunday 9 February 2020

How to solve JavaScript heap out of memory issue in Angular project

AngularHeap Memmory issueJavaScript

In this article we are going to discuss about JavaScript heap out memory issue which used to happen in Angular project. This issue you might have faced while running a project or building a project or deploying from Jenkin. This issue generally will happen if your project is really big or wrongly designed. However, we have solutions to address this issue. I am going to discuss about the solutions which I found in my experience. Before explaining those let us check some temporary solutions to over come this. To fix real issues you may required time, so use below thing for time being.

Temporary solutions to run the application

Once I faced this issue in one of my application, first I tried to build the application using below command instead of ng build.


ng node --max_old_space_size=4096 && ng build --prod

Here I have added max old space. But after some time again I faced the same issue, I end up with increasing the max old space size.


ng node --max_old_space_size=8192 && ng build --prod

This time even ng serve stopped working and started showing JavaScript heap out memory issue. I have forced to change ng serve as well.


node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve

More info


node --max-old-space-size=1024

node --max-old-space-size=2048

node --max-old-space-size=3072

node --max-old-space-size=4096

node --max-old-space-size=5120

node --max-old-space-size=6144

node --max-old-space-size=7168

node --max-old-space-size=8192

Since It is going worse, the next thing was disabling AOT build, for that I have used below code.


ng build --prod --aot=false --build-optimizer=false

This is not at all a suggested way because we are disabling one of the angular features. As I said above all are the temporary solutions. Next thing I have done is that rechecking my application design, module import etc. Below are my findings and finally I solved JavaScript heap out of memory issue.

Proper module import and correct design for module.

First thing I have done is that cross checked all modules. I had around 10 modules in my application. I have created a shared module and moved all reusable components into that module. And imported shared module in other modules where ever it is applicable.

I am already using lazy routing module for my application, and hence removed all module import (Module which are created by me) from app module. Then checked all module import and cleaned up which are not required. After above changes itself you can see the difference. But I still started analysing more and found below issue as well.

Cross check stylesheet import

I have used scss file in my application. I have cross checked all SCSS and find out that lot of files were imported multiple times. Moved all common CSS to a single file (may be more than one, depends on your code) and imported only where it is applicable. Also stopped importing variable CSS file every where and instead imported only required places. Basically, I have rearranged my CSS file in a better way and made sure CSS files are not duplicated.

External libraries

Please be extra care full while selecting external libraries. Most of the libraries are not designed in Angular way. In my case I was using lodash and underscore, I have removed underscore first. As JavaScript ES6 has lot of features so we don't need many of these kinds of libraries. I have removed lodash as well and started using ES6 feature directly. My personal suggestion is that try to avoid using external libraries as much as possible. If you still want to use, for example lodash then wisely import. Don’t do complete file import everywhere.

Clean up unused import from component

This is last thing I have done, checked all components and removed unused import.

Conclusion

If your project is very big, plan design properly, use module wisely. Architect your application such a way that modules are configured properly. Split your application with different logistical modules and make sure all are imported properly. You can have more shared modules depends on your project. I will be sharing the design and folder structure of a complex angular application in my next article.

In this article we have discussed about, how to solve JavaScript heap memory issue in an Angular application also about the temporary solutions to over come this issue. Above all are written from my experience, if you know more and better solutions please comment it. It will be use full for others.

Related Info

1. Date filtering and formatting using pipe in Angular

2. Conditionally add class to an element on click - Angular

3. Conditionally add class using Angular - 5 methods

4. How to create an Angular application from scratch with simple steps.

1 comment :

  1. Thanks a lot, my heap memory issue solved. I was importing the module in app module as well as using lazy module. Removed from app module and the issues is resolved.

    ReplyDelete