Application error when running angular app on heroku

Question

I've successfully deployed my angular2 application to heroku but unfortunately I'm getting the "An error occurred in the application and your page could not be served" page displaying.

When I run the app locally using npm start it runs fine.

I think it may be something to do with dependencies or the heroku instance having a different configuration. I've tried modifying the start command but to no avail.

The project is built on the angular quickstart guide found here

My package.json file

{
  "name": "danoram-angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.3.0",
    "@angular/compiler": "~2.3.0",
    "@angular/core": "~2.3.0",
    "@angular/forms": "~2.3.0",
    "@angular/http": "~2.3.0",
    "@angular/platform-browser": "~2.3.0",
    "@angular/platform-browser-dynamic": "~2.3.0",
    "@angular/router": "~3.3.0",
    "@angular/upgrade": "~2.3.0",
    "angular-in-memory-web-api": "~0.1.16",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-rc.4",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "webpack": "^1.14.0"
  }
}

heroku logs

2016-12-20T05:55:10.169815+00:00 app[web.1]: npm ERR! Failed at the [email protected] lite script 'lite-server'.
2016-12-20T05:55:10.170077+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2016-12-20T05:55:10.170162+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the danoram-angular-quickstart package,
2016-12-20T05:55:10.170243+00:00 app[web.1]: npm ERR! not with npm itself.
2016-12-20T05:55:10.170321+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2016-12-20T05:55:10.170401+00:00 app[web.1]: npm ERR!     lite-server
2016-12-20T05:55:10.170464+00:00 app[web.1]: npm ERR! You can get information on how to open an issue for this project with:
2016-12-20T05:55:10.170538+00:00 app[web.1]: npm ERR!     npm bugs danoram-angular-quickstart
2016-12-20T05:55:10.170618+00:00 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
2016-12-20T05:55:10.170696+00:00 app[web.1]: npm ERR!     npm owner ls danoram-angular-quickstart
2016-12-20T05:55:10.170790+00:00 app[web.1]: npm ERR! There is likely additional logging output above.
2016-12-20T05:55:10.173933+00:00 app[web.1]: 
2016-12-20T05:55:10.174095+00:00 app[web.1]: npm ERR! Please include the following file with any support request:
2016-12-20T05:55:10.174171+00:00 app[web.1]: npm ERR!     /app/npm-debug.log
2016-12-20T05:55:10.183775+00:00 app[web.1]: 
2016-12-20T05:55:10.191217+00:00 app[web.1]: npm ERR! Linux 3.13.0-105-generic
2016-12-20T05:55:10.191388+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2016-12-20T05:55:10.191531+00:00 app[web.1]: npm ERR! node v6.9.1
2016-12-20T05:55:10.191647+00:00 app[web.1]: npm ERR! npm  v3.10.8
2016-12-20T05:55:10.191761+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2016-12-20T05:55:10.191855+00:00 app[web.1]: npm ERR! [email protected] start: `npm run lite`
2016-12-20T05:55:10.191943+00:00 app[web.1]: npm ERR! Exit status 1

I've also put the project code on github for reference here

All help is appreciated!

error is coming because lite-server is not installed

ranakrunal9
– ranakrunal9

2016-12-20 06:59:03 +00:00
Commented Dec 20, 2016 at 6:59 — ranakrunal9
– ranakrunal9, Commented Dec 20, 2016 at 6:59

eko · Accepted Answer · 2016-12-20 10:25:56Z

3

You can't deploy an app to heroku without a backend. Your best choice of backend with an angular2 app would be nodejs/express framework in my opinion.

Heroku will look at your package.json's start script which should be something like:

"scripts": {
    "start": "node app.js"
  }

My suggestion would be to wrap your project inside a folder (lets say client folder), then in the new root dir, create another package.json and an app.js file

package.json:

{
  "name": "basictemplate",
  "version": "1.0.0",
  "description": "",
  "main": "web.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "heroku-prebuild": "echo This runs before Heroku installs your dependencies.",
    "heroku-postbuild": "npm install --prefix ./client"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.13.3",
    "express": "^4.13.3"
  },
  "engines": {
    "node": "4.1.1"
  }
}

app.js:

var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}) );

app.use( express.static(__dirname + '/client' ) );

var listener = server.listen(process.env.PORT || 5000, function(){
    console.log('Listening on port ' + listener.address().port); //Listening on port 5000
});

More info: https://devcenter.heroku.com/articles/deploying-nodejs

edited Dec 20, 2016 at 10:25

answered Dec 20, 2016 at 7:24

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Daniel Oram Over a year ago

Thanks so much @echonax ! this has really helped my understanding too :D

Daniel Oram Over a year ago

I made an edit to your solution just to add a listener to the port. works like a charm

eko Over a year ago

@Danoram Ah, thank you. I forgot that part :) and glad I could help.

Sampgun Over a year ago

can I run it with ng serve instead?

Collectives™ on Stack Overflow

Application error when running angular app on heroku

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related