我有一个简单的angular 6应用程序,我已经部署到了heroku,但是当我运行
heroku logs
我收到以下错误
2018-07-15T00:45:51.000000+00:00 app[api]: Build succeeded
2018-07-15T00:45:53.901220+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-15T00:45:56.221740+00:00 heroku[web.1]: Process exited with status 1
2018-07-15T00:45:56.166323+00:00 app[web.1]: npm ERR! missing script: start
2018-07-15T00:45:56.174458+00:00 app[web.1]:
2018-07-15T00:45:56.174761+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-07-15T00:45:56.174953+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-07-15T00_45_56_169Z-debug.log
2018-07-15T00:45:56.236130+00:00 heroku[web.1]: State changed from starting to crashed
2018-07-15T00:45:56.238073+00:00 heroku[web.1]: State changed from crashed to starting
2018-07-15T00:45:59.380249+00:00 heroku[web.1]: Starting process with command `npm start`
2018-07-15T00:46:01.530698+00:00 app[web.1]: npm ERR! missing script: start
2018-07-15T00:46:01.544315+00:00 app[web.1]:
2018-07-15T00:46:01.544530+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-07-15T00:46:01.544632+00:00 app[web.1]: npm ERR! /app/.npm/_logs/2018-07-15T00_46_01_533Z-debug.log
2018-07-15T00:46:01.624476+00:00 heroku[web.1]: State changed from starting to crashed
2018-07-15T00:46:01.603498+00:00 heroku[web.1]: Process exited with status 1
这是我的package.json
{
"name": "product-client",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "grunt sass:production && ng build --aot --prod",
"start": "ng serve"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/cli": "~6.0.8",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/compiler-cli": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^2.2.0",
"angular2-flash-messages": "^2.0.5",
"bootstrap": "^3.3.7",
"bootstrap-select-v4": "^1.12.4",
"brew": "0.0.8",
"brew-tree": "0.0.2",
"cities.json": "^1.1.2",
"core-js": "^2.5.4",
"igniteui-angular": "^6.1.0",
"jquery": "^3.3.1",
"ngx-bootstrap": "^3.0.1",
"primeicons": "^1.0.0-beta.9",
"primeng": "^6.0.0",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"tree-cli": "^0.4.12",
"winston": "^3.0.0",
"zone.js": "^0.8.26"
},
"engines": {
"node": "8.9.4",
"npm": "5.6.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^2.7.0-dev.20180108"
}
}
这是我的procfile
worker: ng serve
这是我的结构
└───src
├───app
│ ├───app-routing
│ ├───product-detail
│ ├───product-list
│ ├───star
│ └───welcome
├───assets
│ ├───api
│ │ └───products
│ └───images
├───environments
└───sass
请注意,在我的本地计算机上,当我将其部署到heroku时,一切正常,
请注意,它只是没有休息API的正常角度登录页面
问题
我的代码有什么问题?
答案 0 :(得分:2)
您需要安装服务器才能运行您的应用 在本地,我们从终端运行ng serve,以在本地浏览器上运行我们的应用。但是我们将需要设置一个Express服务器,该服务器将运行生产就绪的应用程序(通过创建的dist文件夹),以确保轻巧和快速加载。
运行以下命令安装Express服务器:
npm install express path --save
在应用程序的根目录中创建一个server.js文件,然后粘贴以下代码。
//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);
更改启动命令 在package.json中,将“开始”命令更改为节点server.js,使其变为:
"start": "node server.js"
这是完整的package.json的样子。根据您的特定于应用程序的软件包,您可能包含更多的东西。
现在您的程序包,json应该看起来像这样
{
"name": "product-client",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "grunt sass:production && ng build --aot --prod",
"start": "node server.js"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/cli": "~6.0.8",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/compiler-cli": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^2.2.0",
"angular2-flash-messages": "^2.0.5",
"bootstrap": "^3.3.7",
"bootstrap-select-v4": "^1.12.4",
"brew": "0.0.8",
"brew-tree": "0.0.2",
"cities.json": "^1.1.2",
"core-js": "^2.5.4",
"igniteui-angular": "^6.1.0",
"jquery": "^3.3.1",
"ngx-bootstrap": "^3.0.1",
"primeicons": "^1.0.0-beta.9",
"primeng": "^6.0.0",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"tree-cli": "^0.4.12",
"winston": "^3.0.0",
"zone.js": "^0.8.26"
},
"engines": {
"node": "8.9.4",
"npm": "5.6.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^2.7.0-dev.20180108"
}
}