Get App Error on heroku after successful build for angular app deployment

  angular, heroku, node.js

I am trying to deploy my basic angular app, build succeeded but on hitting url it says application error and in console it says 503 service unavailable
I have tried all the solutions are available on stack overflow but none of them works for me, i bellow i have add my package.json and server.json file,

note: there is no error in deployment build it succeeded and my
project is working fine in my local server with the same setting as in
server.js but its not working on live.

Screen Record:
https://www.awesomescreenshot.com/video/3422522?key=0987ec74f4ca1e0d8667b143e7144364

package.json

    {
  "name": "client-gateway",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.10",
    "@angular/cli": "^11.2.9",
    "@angular/common": "~11.2.10",
    "@angular/compiler": "~11.2.10",
    "@angular/compiler-cli": "~11.2.10",
    "@angular/core": "~11.2.10",
    "@angular/forms": "~11.2.10",
    "@angular/platform-browser": "~11.2.10",
    "@angular/platform-browser-dynamic": "~11.2.10",
    "@angular/router": "~11.2.10",
    "@auth0/auth0-angular": "^1.3.2",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "@ng-select/ng-select": "^6.1.0",
    "ng-bootstrap": "^0.46.0",
    "ng-dropdown": "^1.0.0",
    "ngx-bootstrap": "^6.2.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.7",
    "tslib": "^1.9.0",
    "typescript": "~4.1.5",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.9",
    "@angular/cli": "^11.2.9",
    "@angular/language-service": "~11.2.10",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine": "^3.7.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.3.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0"
  },
  "engines": {
    "node": "12.6.0",
    "npm": "6.14.10"
  }
}

server.js

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static('./dist/client-gateway'));

app.get('/*', (req, res) =>
    res.sendFile('index.html', {root: 'dist/client-gateway/'}),
);

// Start the app by listening on the default Heroku port
var server = app.listen(process.env.PORT || 5000, function () {
    var port = server.address().port;
    console.log("Express is working on port " + port);
  });

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.