Angular 7 App部署到Heroku-构建失败，应用程序错误

Question

我正在尝试将我的 Angular 应用程序部署到 Heroku。我这样做的经验有限，并且遇到了错误。我对 stackoverflow 的搜索使我尝试了不同的配置，但每次都出现错误。我得到的最接近的是当我没有在脚本中包含“postinstall”时，在这种情况下构建成功但我仍然收到相同的代码 H10 应用程序错误。

我已经尝试过“postinstall:ng build --aot --prod”、“heroku-postbuild”：“ng build --aot --prod”和 ng build --aot --prod”，但没有不同的是，由于这条线，每次构建都会失败。

这是我的 package.json

{
  "name": "hockey-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "concurrently \"ng build --watch\" \"node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^7.3.0",
    "@angular/cli": "~6.2.5",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^7.3.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "bootstrap": "^4.2.1",
    "core-js": "^2.5.4",
    "enhanced-resolve": "^4.1.0",
    "express": "^4.16.4",
    "path": "^0.12.7",
    "rxjs": "~6.2.0",
    "typescript": "~2.9.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  },
  "engines": {
    "node": "8.11.4",
    "npm": "6.4.1"
  }
}

我的 server.js

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/hockey-app'));

app.get('*', function(req,res) { 
    res.sendFile(path.join(__dirname, '/dist/hockey-app/index.html'));
});

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

感谢任何帮助。谢谢。

编辑：构建成功并部署但继续收到应用程序错误。 Heroku 日志：

2019-02-19T23:35:02.490703+00:00 heroku[路由器]: at=error code=H10 desc="应用程序崩溃" 方法=GET 路径="/" 主机=nhl-hockey-app.herokuapp.com request_id=cd86c7cd-aaa3-489f-b4ce-bb1c0a1f7e90 fwd="151.202.21.77" dyno=连接=服务=状态=503字节=协议=https 2019-02-19T23:35:02.861982+00:00 heroku[路由器]: at=error code=H10 desc="应用程序崩溃" 方法=GET path="/favicon.ico" 主机=nhl-hockey-app.herokuapp.com request_id=1f51f401-9349-4ae6-9d1e-a354fffff8ee fwd="151.202.21.77" dyno=连接=服务=状态=503字节=协议=https

Answer 1

使用heroku-postbuild，它将取代正常的构建脚本。如果您使用 postinstall，它将构建应用程序两次（npm run postinstall && npm run build）。当您将代码推送到 heroku 时，您应该能够看到它。

当您的应用程序成功构建时，heroku 将使用启动脚本来启动您的应用程序。我认为您的启动脚本不适用于 heroku，因为 concurrent 是一个 npm 模块，我在 package.json 中看不到它，并且“ng build --watch”用于本地开发，而不是用于在其上运行代码heroku。

我建议在您的项目文件夹中创建一个 Procfile。
https://devcenter.heroku.com/articles/getting-started-with-nodejs#define-a-procfile
Heroku 将使用此命令来启动您的应用程序，即服务器。
简介：

web: node server.js

Answer 2

尝试移动

"@angular/cli": "~6.2.5",
"@angular/compiler-cli": "^6.1.0"

从devDependencies 到dependencies...