Angular 7 App deploy to Heroku- Build Failing, Application Error

Question

I am trying to deploy my Angular App to Heroku. I have limited experience doing this and am encountering errors. My searching of stackoverflow have led me to try different configurations but each time i get an error. The closest I have gotten was when i did not include "postinstall" in the scripts, in that case the build was successful but I still received the same code H10 application error.

I've tried both "postinstall:ng build --aot --prod”, “heroku-postbuild”: “ng build --aot --prod”, and ng build --aot --prod” but no difference, the build fails each time due to this line.

here is my package.json

{
  "name": "hockey-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "concurrently \"ng build --watch\" \"node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^7.3.0",
    "@angular/cli": "~6.2.5",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^7.3.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "bootstrap": "^4.2.1",
    "core-js": "^2.5.4",
    "enhanced-resolve": "^4.1.0",
    "express": "^4.16.4",
    "path": "^0.12.7",
    "rxjs": "~6.2.0",
    "typescript": "~2.9.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  },
  "engines": {
    "node": "8.11.4",
    "npm": "6.4.1"
  }
}

my server.js

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

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname,  '/dist/hockey-app'));

app.get('*', function(req,res) { 
    res.sendFile(path.join(__dirname, '/dist/hockey-app/index.html'));
});

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

Any help is appreciated. Thank you.

edit: build succeeds and deploy but continue to get Application error. Heroku logs:

2019-02-19T23:35:02.490703+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=nhl-hockey-app.herokuapp.com request_id=cd86c7cd-aaa3-489f-b4ce-bb1c0a1f7e90 fwd="151.202.21.77" dyno= connect= service= status=503 bytes= protocol=https 2019-02-19T23:35:02.861982+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=nhl-hockey-app.herokuapp.com request_id=1f51f401-9349-4ae6-9d1e-a354fffff8ee fwd="151.202.21.77" dyno= connect= service= status=503 bytes= protocol=https

You have this error: `'thisPlayer' is private and only accessible within class 'PlayerDetailComponent'. src/app/player-detail/player-detail.component.html(24,39): : Property 'thisPlayer' is private and only accessible within class 'PlayerDetailComponent'. src/app/player-detail/player-detail.component.html(29,20): : Property 'thisPlayer' is private and only accessible within class 'PlayerDetailComponent'.`, just define the property thisPlayer as public in your component PlayerDetailComponent (https://github.com/angular/angular/issues/11422). — stp18, Feb 19 '19 at 23:16
yes i was suspicious of that. Fixed it, now the build completes but i still have the same application errors: included above — Daniel S Beebot, Feb 19 '19 at 23:31
Try to define your server.js as this: https://hastebin.com/zavehahide.js as from this question: https://stackoverflow.com/questions/48479575/deploy-angular-5-nodejs-express-app-to-heroku — stp18, Feb 19 '19 at 23:57
Thanks, I updated by server.js file, however I continue to get the same application errors. Note I connected the heroku app to github to watch for updates to the master and build everytime a new master is pushed. Also, I manually built the app (ng build) in order to create the dist folder in my app directory prior to updating the github remote, not sure if this is causing any problems — Daniel S Beebot, Feb 20 '19 at 20:57
Does your npm start work when you use it on your local environment?, does your dist include the hokey-app subdir after ng build? — stp18, Feb 22 '19 at 02:54
Yes your link worked , I copied the express static line from there, and passed my dist/hockey-app/index.html and it worked both locally and eventually (with other unrelated tweaks) deployed successfully. — Daniel S Beebot, Feb 22 '19 at 20:17

score 3 · Answer 1 · answered Apr 21 '19 at 21:37

3

Try moving

"@angular/cli": "~6.2.5",
"@angular/compiler-cli": "^6.1.0"

from devDependencies to dependencies...

answered Apr 21 '19 at 21:37

Joshua Michael Calafell

2,945
34
47

score 2 · Accepted Answer · answered Apr 06 '19 at 20:53

Use heroku-postbuild, it will replace the normal build script. If you use postinstall, it will build the application twice (npm run postinstall && npm run build). You should be able to see it when you push your code to heroku.

When your application builds succesfully heroku would use the start script to start your application. I don't think your start-script works on heroku, because concurrently is a npm module, which I don't see in package.json and "ng build --watch" is meant for local development, not for running your code on heroku.

I would recommend to create a Procfile to your project folder.
https://devcenter.heroku.com/articles/getting-started-with-nodejs#define-a-procfile
Heroku would use this command to start up your application, the server.
Procfile:

web: node server.js

Angular 7 App deploy to Heroku- Build Failing, Application Error

2 Answers2