I am tring deploy angular project on heroku but get error-CodePudding

I am trying to deploy Angular project to Heroku. I do all the steps and get An error that occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command

package.json

{
  "name": "taskmanger-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/cli": "~13.1.2",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/compiler-cli": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "bootstrap": "^5.1.3",
    "express": "^4.17.2",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "typescript": "~4.5.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.2",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.0",
    "@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.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }
}

log error

 »   Warning: heroku update available from 7.53.0 to 7.59.2.
2022-01-06T10:03:51.565778 00:00 app[api]: Initial release by user [email protected]
2022-01-06T10:03:51.565778 00:00 app[api]: Release v1 created by user [email protected]
2022-01-06T10:03:53.260159 00:00 app[api]: Enable Logplex by user [email protected]
2022-01-06T10:03:53.260159 00:00 app[api]: Release v2 created by user [email protected]
2022-01-06T10:11:51.000000 00:00 app[api]: Build started by user [email protected]
2022-01-06T10:13:13.747180 00:00 app[api]: Release v3 created by user [email protected]
2022-01-06T10:13:13.747180 00:00 app[api]: Deploy 02b39581 by user [email protected]
2022-01-06T10:13:13.763857 00:00 app[api]: Scaled to web@1:Free by user [email protected]
2022-01-06T10:13:21.768459 00:00 heroku[web.1]: Starting process with command `npm start`
2022-01-06T10:13:23.031986 00:00 app[web.1]:
2022-01-06T10:13:23.031995 00:00 app[web.1]: > [email protected] start /app
2022-01-06T10:13:23.031995 00:00 app[web.1]: > ng serve
2022-01-06T10:13:23.031995 00:00 app[web.1]:
2022-01-06T10:13:24.093017 00:00 app[web.1]: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.
2022-01-06T10:13:24.135825 00:00 app[web.1]: npm ERR! code ELIFECYCLE
2022-01-06T10:13:24.136043 00:00 app[web.1]: npm ERR! errno 1
2022-01-06T10:13:24.141950 00:00 app[web.1]: npm ERR! [email protected] start: `ng serve`
2022-01-06T10:13:24.142062 00:00 app[web.1]: npm ERR! Exit status 1
2022-01-06T10:13:24.142192 00:00 app[web.1]: npm ERR!
2022-01-06T10:13:24.142277 00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2022-01-06T10:13:24.142369 00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-01-06T10:13:24.146877 00:00 app[web.1]:
2022-01-06T10:13:24.147079 00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2022-01-06T10:13:24.147165 00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2022-01-06T10_13_24_143Z-debug.log
2022-01-06T10:13:24.287866 00:00 heroku[web.1]: Process exited with status 1
2022-01-06T10:13:24.468341 00:00 heroku[web.1]: State changed from starting to crashed
2022-01-06T10:13:24.509267 00:00 heroku[web.1]: State changed from crashed to starting
2022-01-06T10:13:32.000000 00:00 app[api]: Build succeeded
2022-01-06T10:13:34.532068 00:00 heroku[web.1]: Starting process with command `npm start`
2022-01-06T10:13:36.339171 00:00 app[web.1]:
2022-01-06T10:13:36.339188 00:00 app[web.1]: > [email protected] start /app
2022-01-06T10:13:36.339188 00:00 app[web.1]: > ng serve
2022-01-06T10:13:36.339189 00:00 app[web.1]:
2022-01-06T10:13:37.719745 00:00 app[web.1]: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.
2022-01-06T10:13:37.735219 00:00 app[web.1]: npm ERR! code ELIFECYCLE
2022-01-06T10:13:37.735453 00:00 app[web.1]: npm ERR! errno 1
2022-01-06T10:13:37.741793 00:00 app[web.1]: npm ERR! [email protected] start: `ng serve`
2022-01-06T10:13:37.741857 00:00 app[web.1]: npm ERR! Exit status 1
2022-01-06T10:13:37.741926 00:00 app[web.1]: npm ERR!
2022-01-06T10:13:37.741985 00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2022-01-06T10:13:37.742022 00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-01-06T10:13:37.746924 00:00 app[web.1]:
2022-01-06T10:13:37.747005 00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2022-01-06T10:13:37.747056 00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2022-01-06T10_13_37_742Z-debug.log
2022-01-06T10:13:37.913531 00:00 heroku[web.1]: Process exited with status 1
2022-01-06T10:13:38.042314 00:00 heroku[web.1]: State changed from starting to crashed
2022-01-06T10:13:40.131198 00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=task-manager-app-frontend.herokuapp.com request_id=922a2ace-cedb-4680-8cec-7a652a38d64f fwd="102.42.155.6" dyno= connect= service= status=503 bytes= protocol=https
2022-01-06T10:13:41.159054 00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=task-manager-app-frontend.herokuapp.com request_id=43098310-85fa-4ad5-be7d-eb626eb1ab41 fwd="102.42.155.6" dyno= connect= service= status=503 bytes= protocol=https
2022-01-06T10:13:42.812086 00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=task-manager-app-frontend.herokuapp.com request_id=ad51ff7b-521b-4aa2-ae33-708fd79d17ee fwd="102.42.155.6" dyno= connect= service= status=503 bytes= protocol=https
2022-01-06T10:50:35.032154 00:00 heroku[web.1]: State changed from crashed to starting
2022-01-06T10:50:43.264423 00:00 heroku[web.1]: Starting process with command `npm start`
2022-01-06T10:50:45.594478 00:00 app[web.1]:
2022-01-06T10:50:45.594495 00:00 app[web.1]: > [email protected] start /app
2022-01-06T10:50:45.594496 00:00 app[web.1]: > ng serve
2022-01-06T10:50:45.594496 00:00 app[web.1]:
2022-01-06T10:50:46.420060 00:00 app[web.1]: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.
2022-01-06T10:50:46.429528 00:00 app[web.1]: npm ERR! code ELIFECYCLE
2022-01-06T10:50:46.429724 00:00 app[web.1]: npm ERR! errno 1
2022-01-06T10:50:46.433557 00:00 app[web.1]: npm ERR! [email protected] start: `ng serve`
2022-01-06T10:50:46.433610 00:00 app[web.1]: npm ERR! Exit status 1
2022-01-06T10:50:46.433673 00:00 app[web.1]: npm ERR!
2022-01-06T10:50:46.433719 00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2022-01-06T10:50:46.433763 00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-01-06T10:50:46.436128 00:00 app[web.1]:
2022-01-06T10:50:46.436213 00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2022-01-06T10:50:46.436265 00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2022-01-06T10_50_46_434Z-debug.log
2022-01-06T10:50:46.703018 00:00 heroku[web.1]: Process exited with status 1
2022-01-06T10:50:46.763378 00:00 heroku[web.1]: State changed from starting to crashed
2022-01-06T10:54:06.469123 00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=task-manager-app-frontend.herokuapp.com request_id=eb7f8557-007d-4196-be90-9c6eb77401cc fwd="156.222.23.129" dyno= connect= service= status=503 bytes= protocol=https        
2022-01-06T10:54:09.814001 00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=task-manager-app-frontend.herokuapp.com request_id=c040fcf2-7e68-4fe4-8d49-4fd41f5868a1 fwd="156.222.23.129" dyno= connect= service= status=503 bytes= protocol=https
2022-01-06T10:55:51.780978 00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=task-manager-app-frontend.herokuapp.com request_id=32938f3c-0639-4448-8593-1f554b88d2b0 fwd="156.222.23.129" dyno= connect= service= status=503 bytes= protocol=https

CodePudding user response：

in package.json file change this

  "scripts": {
    "start": "ng serve",
  },

to this

  "scripts": {
    "start": "node server.js",
  },

server.js this file I was created to connect Heroku with my index.html the index.html was created after building your project using ng build --prod in dist file