javascript - 在heroku上运行 Angular 应用程序时出现应用程序错误

标签 javascript angular heroku npm

我已成功将 Angular2 应用程序部署到 Heroku,但不幸的是,我收到了“应用程序中发生错误,无法提供您的页面”页面。

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

我认为这可能与依赖项或具有不同配置的heroku实例有关。我尝试过修改启动命令但没有成功。

该项目是基于 Angular 快速入门指南构建的 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395d5857564b58541458575e4c55584b14484c505a524a4d584b4d790817091709" rel="noreferrer noopener nofollow">[email protected]</a> 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! <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7a7f70716c7f73337f70796b727f6c336f6b777d756d6a7f6c6a5e2f302e302e" rel="noreferrer noopener nofollow">[email protected]</a> start: `npm run lite`
2016-12-20T05:55:10.191943+00:00 app[web.1]: npm ERR! Exit status 1

我也把项目代码放在github上供引用here

感谢所有帮助!

最佳答案

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

Heroku 将查看您的 package.json 的启动脚本,该脚本应该类似于:

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

我的建议是将您的项目包装在一个文件夹中(比如说 client 文件夹),然后在新的根目录中创建另一个 package.json 和一个 < strong>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

关于javascript - 在heroku上运行 Angular 应用程序时出现应用程序错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41236480/

相关文章:

javascript - Bookmarklet 抓取 Youtube URL 并转到另一个网站

javascript - 如何测试传递给函数的变量?

Angular Chrome Api 数据绑定(bind)不起作用

Python Heroku 应用程序失败并出现 "Address in use"错误

javascript - 获取 "push up"的粘性标题,就像在 Instagram 的 iPhone 应用程序中使用 CSS 和 jQuery

Angular Observable 等到它完成

JavaScript - Daterangepicker,isInvalidDate 方法仅启用一天

Java:Heroku 项目中的 Json

ruby-on-rails - Net::FTPPermError (500 I won't open a connection to 10.10 ...... (only to 174.12 ......)

c# - 如何从外部脚本调用 HTML 中的 JavaScript 函数