CODEWITHSUNDEEP
angularheroku
Daniel S Beebot
Daniel S Beebot

Reputation: 37

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

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

Upvotes: 2

Views: 2654

Answers (2)

Joshua Michael Calafell
Joshua Michael Calafell

Reputation: 3107

Try moving

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

from devDependencies to dependencies...

Upvotes: 3

IamSoClueless
IamSoClueless

Reputation: 451

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

Upvotes: 2

Related Questions