Angular crashed while deploying to heroku-CodePudding

this error I got from heroku logs

2022-10-07T08:35:34.000000 00:00 app[api]: Build succeeded
2022-10-07T08:35:40.754670 00:00 heroku[web.1]: Starting process with command `npm start`
2022-10-07T08:35:42.547115 00:00 app[web.1]:
2022-10-07T08:35:42.547125 00:00 app[web.1]: > [email protected] start
2022-10-07T08:35:42.547126 00:00 app[web.1]: > ng serve
2022-10-07T08:35:42.547126 00:00 app[web.1]:
2022-10-07T08:35:45.432058 00:00 app[web.1]: - Generating browser application bundles (phase: setup)...
2022-10-07T08:35:55.858437 00:00 heroku[web.1]: Process exited with status 134
2022-10-07T08:35:56.013095 00:00 heroku[web.1]: State changed from starting to crashed
2022-10-07T08:35:55.581897 00:00 app[web.1]:
2022-10-07T08:35:55.581932 00:00 app[web.1]: <--- Last few GCs --->
2022-10-07T08:35:55.581934 00:00 app[web.1]:
2022-10-07T08:35:55.581935 00:00 app[web.1]: [22:0x5182ba0]    12759 ms: Mark-sweep (reduce) 251.6 (258.4) -> 251.1 (258.4) MB, 197.5 / 0.0 ms  (average mu = 0.391, current mu = 0.244) allocation failure scavenge might not succeed
2022-10-07T08:35:55.581936 00:00 app[web.1]: [22:0x5182ba0]    12978 ms: Mark-sweep (reduce) 252.3 (258.4) -> 251.9 (259.1) MB, 211.3 / 0.1 ms  (average mu = 0.228, current mu = 0.035) allocation failure scavenge might not succeed
2022-10-07T08:35:55.581936 00:00 app[web.1]:
2022-10-07T08:35:55.581942 00:00 app[web.1]:
2022-10-07T08:35:55.581943 00:00 app[web.1]: <--- JS stacktrace --->
2022-10-07T08:35:55.581943 00:00 app[web.1]:
2022-10-07T08:35:55.581944 00:00 app[web.1]: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
2022-10-07T08:35:55.584029 00:00 app[web.1]: 1: 0xb02960 node::Abort() [ng serve]
2022-10-07T08:35:55.584532 00:00 app[web.1]: 2: 0xa18149 node::FatalError(char const*, char const*) [ng serve]
2022-10-07T08:35:55.585229 00:00 app[web.1]: 3: 0xcdd22e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [ng serve]
2022-10-07T08:35:55.585916 00:00 app[web.1]: 4: 0xcdd5a7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [ng serve]
2022-10-07T08:35:55.586590 00:00 app[web.1]: 5: 0xe94c15  [ng serve]
2022-10-07T08:35:55.587284 00:00 app[web.1]: 6: 0xea48dd v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [ng serve]
2022-10-07T08:35:55.588243 00:00 app[web.1]: 7: 0xea75de v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [ng serve]
2022-10-07T08:35:55.588955 00:00 app[web.1]: 8: 0xe68b1a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [ng serve]
2022-10-07T08:35:55.589707 00:00 app[web.1]: 9: 0x11e1886 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [ng serve]
2022-10-07T08:35:55.590500 00:00 app[web.1]: 10: 0x15d54f9  [ng serve]
2022-10-07T08:35:55.618390 00:00 app[web.1]: Aborted

and this is my package json file

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "heroku-postbuild": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^13.3.9",
    "@angular/animations": "~13.0.0",
    "@angular/cdk": "^13.3.9",
    "@angular/cli": "~13.0.3",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/compiler-cli": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/material": "^13.3.9",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "bootstrap": "^5.2.2",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "typescript": "~4.4.3",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0"
  }
}

What can I fix that this simple angular app run on heroku

CodePudding user response：

ng serve - that's for local development, not deploy. Run ng build instead and serve the artifacts from dist. You can build a rudimentary express server for that, sth along these lines:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(process.env.PORT || 4200);

CodePudding user response：

You are getting

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

you can set a bigger space size(depending upon your free ram size 2000/3000/4000/8000) on your package.json like this in your package.json:

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

read more about this problem here, please upvote/select if it helps