0

I'm working on an Angular Nx project that uses Kendo UI for Angular components. Recently, I’ve been facing persistent “JavaScript heap out of memory” errors whenever I run the development server or build process.

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

Logs (abbreviated): <--- Last few GCs ---> [70028:0000020B89251D50] 447688 ms: Mark-sweep ... ... FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

What I’ve Tried Increasing Node.js Memory: I’ve set --max-old-space-size=4096 (and even higher) in NODE_OPTIONS or by using:

node --max-old-space-size=8192 ./node_modules/.bin/nx serve cms This helps temporarily but still doesn’t fully resolve the issue in some cases.

Removing/Optimizing Dependencies: I removed other unused packages and assets, but when Kendo components are in play, the memory usage goes up during build/serve.

Lazy Loading: I’ve ensured large feature modules are lazy-loaded, but it hasn’t eliminated the error.

Upgrading: I have updated my Nx and Angular versions, but the issue still occurs.

please check the screenshot below

enter image description here

Improve this question
3
  • To accurately debug your issue, you may want to be certain that Kendo issue is the root cause. i.e. Remove All Kendo components/modules 'only' and see if issue goes away. If you could reduce the import all Kendo modules and only import the required ones. Also, Nx caches build artifacts by default. If caching is disabled, ensure it’s enabled to reduce repeated computations. tasksRunnerOptions": { "default": { "options": { "cacheableOperations": ["build", "serve"] } } } Commented Jan 10 at 20:10
  • Thanks for the suggestion. I import Kendo modules by feature, and Kendo SCSS (like buttons/inputs) is in a global file without issues. The problem is importing Kendo chart SCSS in dashboard.component.scss: removing it stops out-of-memory errors, but I lose chart styles. Is there a better way to scope or reduce chart SCSS so it only affects the dashboard, without hitting memory limits or bloating the rest of the app? I'm exploring lazy-loading the dashboard module, but unsure if that helps. Any insights on partial or selective SCSS imports are appreciated! Commented Jan 12 at 15:43
  • I see, Yes, you could: a) Move dashboard.component to a lazy-loaded module, ensuring its SCSS is bundled with the module, not global. b) Increase Webpack’s memory limit. For “partial or selective SCSS imports,” Yes you could scope imports to only needed chart styles instead of the entire Kendo SCSS file, if it helps. Instead of: import '~@progress/kendo-theme-default/scss/all'; Use only: import '~@progress/kendo-theme-default/scss/chart/_variables'; import '~@progress/kendo-theme-default/scss/chart/_layout'; import '~@progress/kendo-theme-default/scss/chart/_theme'; GL! Commented Jan 17 at 0:26
Related questions
0
Angular 12 Build Issue - FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
15
Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in angular
0
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory while running typescript node project
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.