CODEWITHSUNDEEP
javascriptangularherokunpm
Daniel Oram
Daniel Oram

Reputation: 8411

Application error when running angular app on heroku

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!

Upvotes: 2

Views: 2336

Answers (1)

eko
eko

Reputation: 40647

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

Upvotes: 3

Related Questions