Problem in deploying Angular app in heroku

Question

I am trying to deploy an Angular project in the Heroku platform, Project got deployed but I am trying to access it's showing an empty page in the screen and when I open logs I am facing a weird error like "Uncaught SyntaxError: Unexpected token '<' " This is my package.json file.

{
  "name": "my-first-app",
  "version": "0.0.0",
   "scripts": {
        "ng": "ng",
        "start": "node server.js",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "postinstall": "ng build --aot --prod"
             },
        "private": true,
       "dependencies": {
         "@angular-devkit/build-angular": "~0.900.0",
         "@angular/animations": "^9.0.0",
         "@angular/common": "^9.0.0",
         "@angular/compiler": "^9.0.0",
         "@angular/compiler-cli": "^9.0.0",
         "@angular/core": "^9.0.0",
         "@angular/forms": "^9.0.0",
         "@angular/platform-browser": "^9.0.0",
         "@angular/platform-browser-dynamic": "^9.0.0",
         "@angular/router": "^9.0.0",
         "bootstrap": "3.3.7",
         "core-js": "^3.1.2",
         "express": "^4.17.1",
         "rxjs": "^6.0.0",
         "rxjs-compat": "^6.0.0",
         "tslib": "^1.9.0",
         "typescript": "3.7.5",
         "zone.js": "~0.10.2"
        },
      "devDependencies": {
        "@angular/cli": "^9.0.0",
        "@angular/language-service": "^9.0.0",
        "@types/jasmine": "~3.3.12",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~12.0.2",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.2",
        "protractor": "~5.4.0",
        "ts-node": "~8.6.2",
        "tslint": "~5.11.0"
        },
       "engines": {
        "node": "~10.16.2",
        "npm": "~6.9.0"
        }
       }

This is my server.js file

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

app.use(express.static(__dirname + '/dist/my-first-app'));
app.listen(process.env.PORT || 8080);

//PATH LOCATION STARTEGY

app.get('/*', function(req,res){
const fullPath = path.join(__dirname + '/dist/my-first-app/index.html');
console.log(" Fetching from.." + fullPath);
res.sendFile(fullPath);
})

console.log('Server started running..');

//Changed to run on Heroku

These are my logs

2020-07-13T07:41:55.728190+00:00 heroku[web.1]: Restarting
2020-07-13T07:41:55.742858+00:00 heroku[web.1]: State changed from up to 
starting
2020-07-13T07:41:57.126267+00:00 heroku[web.1]: Stopping all processes with 
SIGTERM
2020-07-13T07:41:57.251614+00:00 heroku[web.1]: Process exited with status 
143
2020-07-13T07:42:10.403749+00:00 heroku[web.1]: Starting process with command 
`node src/server.js`
2020-07-13T07:42:11.000000+00:00 app[api]: Build succeeded
2020-07-13T07:42:13.232307+00:00 heroku[web.1]: State changed from starting 
to up
2020-07-13T07:42:27.334210+00:00 heroku[router]: at=info method=GET path="/" 
host=front-end-1997.herokuapp.com request_id=f54d5597-039b-4b46-804f- 
a3bb6a77657b fwd="117.204.45.220" dyno=web.1 connect=1ms service=51ms 
status=200 bytes=837 protocol=https
2020-07-13T07:42:27.699671+00:00 heroku[router]: at=info method=GET 
path="/runtime.js" host=front-end-1997.herokuapp.com request_id=f59beb68- 
90e6-4338-a4d4-c14aa41d864c fwd="117.204.45.220" dyno=web.1 connect=1ms 
service=7ms status=200 bytes=837 protocol=https
2020-07-13T07:42:27.721789+00:00 heroku[router]: at=info method=GET 
path="/polyfills.js" host=front-end-1997.herokuapp.com request_id=2b43c7f3- 
6e2e-4f4b-9ba0-539ed5aef376 fwd="117.204.45.220" dyno=web.1 connect=1ms 
service=12ms status=200 bytes=837 protocol=https
2020-07-13T07:42:27.777803+00:00 heroku[router]: at=info method=GET 
path="/styles.js" host=front-end-1997.herokuapp.com request_id=ecb723ff-90fe- 
4327-a74f-7f8facab7302 fwd="117.204.45.220" dyno=web.1 connect=0ms 
service=15ms status=200 bytes=837 protocol=https
2020-07-13T07:42:28.000884+00:00 heroku[router]: at=info method=GET 
path="/vendor.js" host=front-end-1997.herokuapp.com request_id=8360d36e-001e- 
4565-ae9d-76c79fa2b184 fwd="117.204.45.220" dyno=web.1 connect=3ms 
service=3ms status=200 bytes=837 protocol=https
2020-07-13T07:42:28.029924+00:00 heroku[router]: at=info method=GET 
 path="/main.js" host=front-end-1997.herokuapp.com request_id=e44fe6e5-34cf- 
 4ebd-b6a3-c5b0bb041d7f fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=6ms status=200 bytes=837 protocol=https
 2020-07-13T07:42:29.084703+00:00 heroku[router]: at=info method=GET 
 path="/favicon.ico" host=front-end-1997.herokuapp.com request_id=4b4af06a- 
 1dbd-414d-9cea-4f19b9102ac4 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=5ms status=200 bytes=837 protocol=https
 2020-07-13T07:43:00.491794+00:00 heroku[router]: at=info method=GET 
 path="/polyfills.js" host=front-end-1997.herokuapp.com request_id=a16237df- 
 4633-4ae3-8753-b3f40df7b3e5 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=5ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.860971+00:00 heroku[router]: at=info method=GET 
 path="/runtime.js" host=front-end-1997.herokuapp.com request_id=18bf5482- 
 7008-453c-8f39-f08e675c7087 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=2ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.862372+00:00 heroku[router]: at=info method=GET 
 path="/polyfills.js" host=front-end-1997.herokuapp.com request_id=a29b201e- 
 9ab9-41eb-97e6-ca483ff0e809 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=2ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.929580+00:00 heroku[router]: at=info method=GET 
 path="/styles.js" host=front-end-1997.herokuapp.com request_id=25739757- 
 58f9-401e-84dc-0a812045dbef fwd="117.204.45.220" dyno=web.1 connect=0ms 
 service=1ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.956228+00:00 heroku[router]: at=info method=GET 
 path="/main.js" host=front-end-1997.herokuapp.com request_id=1feedb1e-c8d3- 
 42f5-abb4-083468c1e67b fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=2ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:00.965244+00:00 heroku[router]: at=info method=GET 
 path="/vendor.js" host=front-end-1997.herokuapp.com request_id=30c1c0c6- 
 a33f-4d58-b15b-c723b5a3b8a8 fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=5ms status=304 bytes=237 protocol=https
 2020-07-13T07:43:02.099849+00:00 heroku[router]: at=info method=GET 
 path="/favicon.ico" host=front-end-1997.herokuapp.com request_id=e8e1d88e- 
 a621-4dc4-9f33-ffe358b3cd1b fwd="117.204.45.220" dyno=web.1 connect=1ms 
 service=3ms status=304 bytes=237 protocol=https

This is the Ui screen

when I open the main.js file in the browser you can see HTML code inside it. How is this even possible? when I build an Angular project in local main.js has javascript code, but why it's showing HTML on the browser?

This my dist folder content and this is no HTML code inside my main.js

What really went wrong? Is that a bug in heroku? How can I fix this?

Answer 1

it seems there is an issue with your directory name given

'/dist/my-first-app'

in server.js file.

please take a look at directory created under the dist folder of your project after you run

ng build 

according to that change the folder name in the server.js file. Hope it should work !!!