Angular 5 Deploy to Heroku Fails with Application Error H10

Question

I am deploying an Angular 5 app on Heroku using Github deployment. The build process on Heroku completes successfully. Here's the build log:

-----> 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):  9.0.0
       engines.npm (package.json):   5.7.1

       Resolving node version 9.0.0...
       Downloading and installing node 9.0.0...
       Bootstrapping npm 5.7.1 (replacing 5.5.1)...
       npm 5.7.1 installed
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > uws@9.14.0 install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/uws
       > node-gyp rebuild > build_log.txt 2>&1 || exit 0


       > node-sass@4.8.3 install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
       > node scripts/install.js

       Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/linux-x64-59_binding.node
       Download complete
       Binary saved to /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
       Caching binary to /tmp/npmcache.6p2xH/node-sass/4.8.3/linux-x64-59_binding.node

       > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
       > node lib/post_install.js


       > node-sass@4.8.3 postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
       > node scripts/build.js

       Binary found at /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
       Testing binary
       Binary is fine

       > puckgames@0.0.0 postinstall /tmp/build_f955e847c7812f77225546f9f0519385
       > ng build --aot -prod

       Date: 2018-05-01T12:51:14.033Z
       Hash: bae98aa0ec3557461128
       Time: 54842ms
       chunk {0} polyfills.46af3f84a403e219371b.bundle.js (polyfills) 59.7 kB [initial] [rendered]
       chunk {1} main.2c0ad66a3c04faa09c51.bundle.js (main) 393 kB [initial] [rendered]
       chunk {2} styles.63956080a26a0ea45a51.bundle.css (styles) 48.1 kB [initial] [rendered]
       chunk {3} inline.63bc67a6d5411e8cbf28.bundle.js (inline) 1.45 kB [entry] [rendered]
       added 1502 packages from 1260 contributors in 105.406s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 1484 packages in 15.39s
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 36.7M
-----> Launching...
       Released v3

My app never runs due to an Application error. The app runs fine locally when using npm start or heroku local web.

Here are the versions being used in the app:

Angular 5.2.10
npm 5.7.1
node 9.0.0

I receive the following error and don't know how to resolve:

2018-05-01T12:52:03.421925+00:00 app[web.1]: npm ERR! Exit status 1 2018-05-01T12:52:03.422287+00:00 app[web.1]: npm ERR! 2018-05-01T12:52:03.422552+00:00 app[web.1]: npm ERR! Failed at the puckgames@0.0.0 start script. 2018-05-01T12:52:03.422819+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2018-05-01T12:52:03.431523+00:00 app[web.1]: 2018-05-01T12:52:03.431832+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2018-05-01T12:52:03.432041+00:00 app[web.1]: npm ERR!
/app/.npm/_logs/2018-05-01T12_52_03_424Z-debug.log 2018-05-01T12:52:03.482946+00:00 heroku[web.1]: Process exited with status 1 2018-05-01T12:52:03.910224+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=marcums-puck-games.herokuapp.com request_id=6e709bae-f4df-497f-89e9-ddd22b8f9230 fwd="66.41.188.175" dyno= connect= service= status=503 bytes= protocol=https 2018-05-01T12:52:04.326950+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=marcums-puck-games.herokuapp.com request_id=a45ab870-def7-422e-974a-1e25c16191bb fwd="66.41.188.175" dyno= connect= service= status=503 bytes= protocol=https

server.js file

//Install express server
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'));

app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'/dist/index.html'));
});

// Start the app by listening on the default Heroku port
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log('Express server listening on port', port)
});

package.json file

{
  "name": "puckgames",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
    "typescript": "~2.5.3"
  },
  "devDependencies": {
    "@angular/cli": "1.6.8",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.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",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },
  "engines": {
    "node": "9.0.0",
    "npm": "5.7.1"
  }
}

All help would be appreciated. Let me know if I've neglected to provide anything necessary to debug this deployment. Thank you for your time.

patrick.1729 · Answer 1 · 2019-12-27T17:07:18.673

Heroku requires your app to have the backend. To achieve this we will add node and express to your app. I could see most of the changes are present already in your package.json but still, go through the following steps and please make sure that you follow all the steps mentioned below:

In your package.json, copy

"@angular/cli": "1.7.3"", "@angular/compiler-cli": "^5.2.0"

from devDependencies to dependencies.

Create a postinstall script in package.json -

Under "scripts", add a postinstall command:

"postinstall": "ng build --aot --prod"

This tells Heroku to build the application using Ahead Of Time (AOT) compiler and make it production-ready. This will create a dist folder where all html and javascript converted version of our app will be launched from.

Add node and npm engines -

You will need to add the Node and NPM engines that Heroku will use to run your application. Preferably, it should be same version you have on your machine. So, run node -v and npm -v to get the correct version and include it in your package.json file like so:

"engine": { "node": "8.9.4", "npm": "5.6.0" }

Copy typescript to dependencies -

Copy "typescript": "~2.5.3" from devDependencies to dependencies to also inform Heroku what typescript version to use.

Install Enhanced Resolve 3.3.0:

Run the command:

npm install enhanced-resolve@3.3.0 --save-dev

Install Server to run your app:

Locally we run ng serve from terminal to run our app on local browser. But we will need to setup an Express server that will run our production ready app (from dist folder created) only to ensure light-weight and fast loading. Install Express server by running:

npm install express path --save

Create a server.js file in the root of the application and paste the following code:

//Install express server    
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'));

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

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

Now run:

git push heroku your_remote_name

Heroku will look into your package.json and install packages. It will run the postinstall and then, node server.js to spin up your application. You can check Activity tab and open Build log to see how it actually runs. Hope it helps!

please credit the author when you copy paste from a blog https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147 — Phil, Jan 27 '19 at 05:24

score 0 · Answer 2 · answered May 04 '18 at 08:43

0

try copying

"@angular/cli": "1.6.8", "@angular/compiler-cli": "^5.2.0", "typescript": "~2.5.3"

from devdependencies to dependencies

answered May 04 '18 at 08:43

clevin

79
3

Angular 5 Deploy to Heroku Fails with Application Error H10

2 Answers2

Linked