Deploying Angular app to Heroku, build was successful but in browser it shows 404 not found

Question

Hi I am a beginner trying to deploy an app on Heroku. I've successfully deployed an app before but for some reason this time nothing works. I've followed the steps from this blog thoroughly: https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

I am on the latest version of angular and node:
"@angular/cli": "^6.0.1", "@angular/compiler-cli": "^6.0.1", "node": "10.1.0", "npm": "6.0.0"

Below is my build log and my package.json file for reference. No error but app doesn't work after deployed :( Please help!!

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  10.1.0
       engines.npm (package.json):   6.0.0

       Resolving node version 10.1.0...
       Downloading and installing node 10.1.0...
       Bootstrapping npm 6.0.0 (replacing 5.6.0)...
       npm 6.0.0 installed
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > [email protected] install /tmp/build_d3da2bc92ebb72e07bb714a5a00a9e5b/node_modules/uws
       > node-gyp rebuild > build_log.txt 2>&1 || exit 0


       > [email protected] postinstall /tmp/build_d3da2bc92ebb72e07bb714a5a00a9e5b
       > ng build --aot

      39% building modules 245/251 modules       Date: 2018-05-11T17:54:52.577Z
       Hash: a1e28c3c7551108d3a72
       Time: 13703ms
       chunk {main} main.js, main.js.map (main) 134 kB [initial] [rendered]
       chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
       chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
       chunk {styles} styles.js, styles.js.map (styles) 134 kB [initial] [rendered]
       chunk {vendor} vendor.js, vendor.js.map (vendor) 3.03 MB [initial] [rendered]
       added 116 packages from 166 contributors, removed 24 packages, updated 41 packages and moved 7 packages in 54.687s
       [!] 13 vulnerabilities found [21934 packages audited]
       Severity: 3 low | 5 moderate | 5 high
       Run `npm audit` for more detail

-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 806 packages in 12.697s
       [+] no known vulnerabilities found [9183 packages audited]

-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 52.6M
-----> Launching...
       Released v16
       https://c-clin-ng-chatbots.herokuapp.com/ deployed to Heroku

package.json file: (I have to use ng build --aot instead of ng build --aot -prod because the latter gives me an error in the build log saying > ng build --aot -prod Unknown option: '-p'. This worked for me in my previous app.)

{
  "name": "angular-chatbot",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "path": "^0.12.7",
    "rxjs": "^6.0.0",
    "typescript": "~2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  },
  "engines": {
    "node": "10.1.0",
    "npm": "6.0.0"
  }
}

Answer 1

I think the problem is in the server.js try :

app.use(express.static(${__dirname}/front-end/dist/));

app.get('*', (req, res) => {
    res.sendFile(`./front-end/dist/index.html`); // load the single view file (angular will handle the page changes on the front-end)
});

where app is const app = express();

obviously change the path to your dist folder.