Js heap out of memory on running angular 13 project

#angular #javascript #html #programming

Initially my angular project was in the version 10. i had successfully upgraded to v12 by referring the angular upgrade guide . I also upgraded the node version and typescript version respectively. I had upgraded the version to V13 by running these commands

1.npm install --save-dev @angular/cli@13
2.ng update @angular/core@13 --force @angular/cli@13
3.npm install typescript@4.4.4
4.npm install @angular-devkit/build-angular@13.0.4
5.npm cache clean --force
6.npm install
7.ng serve

And iam gettin this error 'Error [ERR_WORKER_OUT_OF_MEMORY]: Worker terminated due to reaching memory limit: JS heap out of memory' on ng serve.How to resolve this issue

Top comments (2)

Muhammad Shahmeer • Sep 1

try following command
node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng serve --o

Developer10 Ishtech • Sep 3 • Edited

I tried this command several times and also increased memory size up to12 gb. but still iam facing same error.
following is my package.json file

{
  "name": "cuba",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "^15.2.10",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.10",
    "@angular/compiler": "^15.2.10",
    "@angular/core": "^15.2.10",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "^15.2.10",
    "@angular/localize": "^15.2.10",
    "@angular/platform-browser": "^15.2.10",
    "@angular/platform-browser-dynamic": "^15.2.10",
    "@angular/router": "^15.2.10",
    "@angular/service-worker": "^15.2.10",
    "@ckeditor/ckeditor5-angular": "^1.2.3",
    "@ckeditor/ckeditor5-build-classic": "^20.0.0",
    "@ckeditor/ckeditor5-build-inline": "^20.0.0",
    "@ctrl/ngx-emoji-mart": "^3.1.0",
    "@kolkov/angular-editor": "^1.1.2",
    "@ng-bootstrap/ng-bootstrap": "^14.2.0",
    "@ng-select/ng-select": "^4.0.0",
    "@ngx-loading-bar/core": "^5.1.0",
    "@ngx-loading-bar/http-client": "^5.1.0",
    "@ngx-loading-bar/router": "^5.1.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@popperjs/core": "^2.11.8",
    "@rxweb/reactive-form-validators": "^2.1.3",
    "@sweetalert2/ngx-sweetalert2": "^8.1.1",
    "@swimlane/ngx-charts": "^14.0.0",
    "@swimlane/ngx-datatable": "^17.0.0",
    "@trademe/ng-add-to-calendar": "^3.2.0",
    "angular-archwizard": "^6.1.0",
    "angular-calendar": "^0.28.16",
    "angular-count-to": "0.0.3",
    "angular-vertical-timeline": "^0.6.0",
    "animate.css": "^4.1.0",
    "apexcharts": "^3.37.3",
    "bootstrap": "^5.3.3",
    "chart.js": "^2.9.3",
    "chartist": "^0.11.4",
    "classlist.js": "^1.1.20150312",
    "depcheck": "^1.4.7",
    "feather-icons": "^4.26.0",
    "file-saver": "^2.0.5",
    "firebase": "^7.24.0",
    "hashids": "^2.2.8",
    "knob": "^1.1.0",
    "leaflet": "^1.6.0",
    "moment": "^2.24.0",
    "ng-apexcharts": "^1.7.4",
    "ng-chartist": "^4.1.0",
    "ng-pick-datetime": "^7.0.0",
    "ng2-charts": "^2.3.3",
    "ng2-daterangepicker": "^3.0.1",
    "ng2-dragula": "^2.1.1",
    "ng2-google-charts": "^6.0.0",
    "ng2-search-filter": "^0.5.1",
    "ngx-chips": "^2.2.1",
    "ngx-cookie-service": "^3.0.3",
    "ngx-datatable": "^1.0.3",
    "ngx-daterangepicker-material": "^4.0.1",
    "ngx-drag-drop": "^1.1.0",
    "ngx-dropzone": "^2.2.2",
    "ngx-dropzone-wrapper": "^9.0.0",
    "ngx-image-cropper": "^3.1.9",
    "ngx-owl-carousel-o": "^3.0.1",
    "ngx-photo-editor": "^0.4.4",
    "ngx-simplemde": "^1.1.1",
    "ngx-toastr": "^12.1.0",
    "ngx-treeview": "^6.0.2",
    "rxjs": "^7.4.0",
    "sweetalert2": "^9.14.4",
    "tslib": "^2.0.0",
    "web-animations-js": "^2.3.2",
    "xlsx": "^0.17.0",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^15.0.0",
    "@angular-devkit/build-angular": "^15.2.11",
    "@angular/cli": "^15.2.11",
    "@angular/compiler-cli": "^15.2.10",
    "@angular/language-service": "^15.2.10",
    "@types/chartist": "^0.9.48",
    "@types/feather-icons": "^4.7.0",
    "@types/googlemaps": "^3.43.3",
    "@types/hammerjs": "^2.0.36",
    "@types/jasmine": "~3.5.11",
    "@types/jasminewd2": "~2.0.3",
    "@types/leaflet": "^1.5.13",
    "@types/mousetrap": "^1.6.3",
    "@types/node": "^14.0.13",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "sass": "^1.77.8",
    "sass-loader": "^16.0.1",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.0",
    "typescript": "~4.9.4"
  }
}

DEV Community

Js heap out of memory on running angular 13 project

Top comments (2)

Read next

Ts transpiling absolute path statements in your npm package

supabase functions (not edge)

Understanding Asynchronous Programming in JavaScript: Beginner's Guide to the Event Loop

A book about arrays