javascript - Angular 6 : Npm ERR! 缺少脚本:部署到 heroku 时启动

Question

我有一个简单的 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 时，一切正常，我收到该错误，

Note its just a normal angular landing page without rest api

问题

我的代码有什么问题吗？

Answer 1

您需要安装服务器才能运行您的应用程序在本地，我们从终端运行 ngserve 以在本地浏览器上运行我们的应用程序。但我们需要设置一个 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中，将“start”命令更改为node server.js，使其变为:

"start": "node server.js"

这是完整的 package.json 的样子。根据您的应用程序特定的软件包，您的软件包可能包含更多内容。

现在你的 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": "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"
  }
}