heroku/node deployment - cannot find module 'app/dist/server/app.js'

Question

I've recently upgraded my angular2 app to angular 5 and I am having trouble deploying it to heroku where it used to work beforehand.

The issue here is that I have a Procfile that has this: 'web: node dist/server/app.js' - where the launch file is stored but heroku is trying to find it add this path - 'app/dist/server/app.js' I'm not sure where this /app is getting appended but it is causing the issue.

Cheers

error description

{
"name": "",
"version": "4.2.4",
"license": "",
"author": "",
"description": "",
"angular-cli": {},
"engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
},
"scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "start": "node dist/server/app.js",
    "predev": "tsc -p server",
    "dev": "node ./node_modules/mongodb-migrate -runmm -dbn dbSettings up && concurrently \"mongod\" \"ng serve -pc proxy.conf.json --open\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"",
    "prod": "concurrently \"mongod\" \"ng build -aot -prod && tsc -p server && node dist/server/app.js\"",
    "test": "ng test",
    "testbe": "tsc -p server && mocha dist/server/test --exit",
    "lint": "ng lint",
    "lintbe": "tslint server/**/**.ts{,x}",
    "e2e": "ng e2e",
    "migrations": "node ./node_modules/mongodb-migrate -runmm -dbn dbSettings up",
    "create-migration": "node ./node_modules/mongodb-migrate -runmm create"
},
"private": true,
"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/cdk": "2.0.0-beta.12",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "2.0.0-beta.12",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@sendgrid/mail": "^6.2.1",
    "angular-bootstrap-md": "^5.1.2",
    "angular2-jwt": "^0.2.3",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.2",
    "bootstrap": "4.0.0-alpha.5",
    "cheerio": "^1.0.0-rc.2",
    "core-js": "^2.4.1",
    "cron": "^1.3.0",
    "dotenv": "^4.0.0",
    "express": "^4.16.3",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "jsonwebtoken": "^8.2.1",
    "migrate-mongo": "^2.2.1",
    "moment": "^2.20.1",
    "mongodb-migrate": "^2.0.2",
    "mongoose": "^5.0.13",
    "morgan": "^1.9.0",
    "popper.js": "^1.14.3",
    "npm-check": "^5.6.0",
    "redis": "^2.8.0",
    "request": "^2.85.0",
    "rxjs": "^5.5.6",
    "tether": "1.4.0",
    "zone.js": "^0.8.19"
},
"devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "chai": "^4.1.2",
    "chai-http": "^4.0.0",
    "codelyzer": "~4.0.1",
    "concurrently": "^3.5.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "mocha": "^5.0.5",
    "nodemon": "^1.17.3",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
}

}

Answer 1

I once came across with a similar issue with a nodejs typescript application that I had connected with git. The .gitingnore file omits js files. So when heroku takes a pull from git it only obtains typescript script(no js files). Where as the npm start script refers to js files.

Another thing to note it that heroku runs only two commands

npm install

and

npm start

Solution Add ng build into the start script so that production files are available for heroku.

package.json

"ng": "ng", 
"build": "ng build --prod", 
"start": "ng build --prod && node dist/server/app.js",