角度6:Npm ERR!脚本丢失:部署到heroku

时间:2018-07-15 01:11:11

标签: javascript angular typescript heroku npm

我有一个简单的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的正常角度登录页面

问题

我的代码有什么问题?

1 个答案:

答案 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"
  }
}