DEV Community

Cover image for Js heap out of memory on running angular 13 project
Developer10 Ishtech
Developer10 Ishtech

Posted on

Js heap out of memory on running angular 13 project

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)

Collapse
 
muhammad_shahmeer profile image
Muhammad Shahmeer

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

Collapse
 
developer10_ishtech_c26e1 profile image
Developer10 Ishtech • 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"
  }
}

Enter fullscreen mode Exit fullscreen mode