在heroku上运行角度应用程序时出现应用程序错误

Question

我已经成功地将我的angular2应用程序部署到了heroku，但不幸的是我收到了“应用程序中发生错误，您的页面无法投放”页面显示。

当我在本地使用npm start运行应用程序时，它运行良好。

我认为这可能与依赖或具有不同配置的heroku实例有关。我试过修改启动命令，但无济于事。

该项目是建立在角快速入门指南发现here

我的package.json文件

{ 
    "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的日志

2016-12-20T05:55:10.169815+00:00 app[web.1]: npm ERR! Failed at the danoram-angular-quickstart@1.0.0 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! danoram-angular-quickstart@1.0.0 start: `npm run lite` 
2016-12-20T05:55:10.191943+00:00 app[web.1]: npm ERR! Exit status 1 

我也把github上的项目代码作为参考here

所有帮助表示赞赏！

Answer 1

您无法将应用程序部署到没有后端的heroku。在我看来，使用angular2应用程序的后端的最佳选择应该是nodejs/express框架。

的Heroku会看你的package.json的启动脚本应该是这样的：

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

我的建议是包装一个文件夹内的项目（可以说客户文件夹），然后在新的根目录，创建另一个的package.json和app.js文件

的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 
}); 

更多信息：https://devcenter.heroku.com/articles/deploying-nodejs