HTTP 404 after successfully deploying Angular app to heroku

Question

Following this guide and also this guide I am trying to deploy my Angular application to heroku.

I actually have two apps. One is working, the other one is not and I cannot see where the difference is.

It "looks like" as if everything is working if I deploy the app (which doesn't work):

..
remote: -----> Compressing...
remote:        Done: 59.7M
remote: -----> Launching...
remote:        Released v6
remote:        https://*********.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/*********.git
   5604a1b..6ee9624  master -> master

Also in the heroku logs I see that the status gets set to up:

2018-11-04T10:10:19.360364+00:00 heroku[web.1]: State changed from up to starting
2018-11-04T10:10:20.374632+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-11-04T10:10:20.492521+00:00 heroku[web.1]: Process exited with status 143
2018-11-04T10:10:31.000000+00:00 app[api]: Build succeeded
2018-11-04T10:10:33.593410+00:00 heroku[web.1]: Starting process with command `npm start`
2018-11-04T10:10:37.121051+00:00 app[web.1]: 
2018-11-04T10:10:37.121068+00:00 app[web.1]: > ********@0.0.0 start /app
2018-11-04T10:10:37.121070+00:00 app[web.1]: > node server.js
2018-11-04T10:10:37.121071+00:00 app[web.1]: 
2018-11-04T10:10:37.849823+00:00 heroku[web.1]: State changed from starting to up
2018-11-04T10:10:38.968886+00:00 heroku[router]: at=info method=GET path="/" host=********.herokuapp.com request_id=81ca531b-c462-4264-a593-7d9b2d676f1d fwd="84.115.204.37" dyno=web.1 connect=1ms service=76ms status=404 bytes=383 protocol=https

However, if I'm now accessing https://*********.herokuapp.com/ what I get is

Cannot GET /

coming from a HTTP 404 Not Found response.

I don't see where I make the mistake so here's the package.json:

{
  "name": "********",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "engines": {
    "node": "8.12.0",
    "npm": "6.4.1"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "6.1.7",
    "@angular/cdk": "^6.4.7",
    "@angular/cli": "6.2.2",
    "@angular/common": "6.1.7",
    "@angular/compiler": "6.1.7",
    "@angular/compiler-cli": "6.1.7",
    "@angular/core": "6.1.7",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "6.1.7",
    "@angular/http": "6.1.7",
    "@angular/material": "^6.4.7",
    "@angular/material-moment-adapter": "^6.4.7",
    "@angular/platform-browser": "6.1.7",
    "@angular/platform-browser-dynamic": "6.1.7",
    "@angular/router": "6.1.7",
    "@fortawesome/angular-fontawesome": "^0.2.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.4",
    "@fortawesome/free-brands-svg-icons": "^5.3.1",
    "@fortawesome/free-solid-svg-icons": "^5.3.1",
    "@ngx-share/button": "^6.0.1",
    "@ngx-share/core": "^6.0.1",
    "angular-mentions": "^0.8.0",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.7",
    "express": "^4.16.3",
    "http-status-codes": "^1.3.0",
    "ng-pick-datetime": "^6.0.16",
    "ngx-logger": "^3.1.0",
    "ngx-moment": "^3.1.0",
    "rxjs": "^6.3.2",
    "typescript": "^2.9.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.8.2",
    "@angular/language-service": "6.1.7",
    "@types/googlemaps": "^3.30.11",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~10.9.4",
    "codelyzer": "^4.4.4",
    "enhanced-resolve": "^4.1.0",
    "jasmine-core": "~3.2.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^1.3.1",
    "protractor": "^5.4.1",
    "ts-node": "~7.0.1",
    "tslint": "^5.11.0"
  }
}

Here is a diff which shows you the difference to the package.json of the working to the non-working application. As you can see there are no essential differences.

This is server.js - which is identical down to the last character in both apps:

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

// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));

// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

---

Any ideas?

Answer 1

Okay, I can't remember if it was me who changed that or whether this is set per default but in angular.json there is also a way to set the output directory (outputPath). For some reason this was set to

"outputPath": "dist/<project-name>"

I changed that to

"outputPath": "dist"

and now everything works.

Answer 2

If you are serving your app's static files from /dist/ then you must tell that to angular by using a switch to the ng build command:

ng build --prod --deploy-url /dist/