Развертывание приложения Angular 7 в Heroku - ошибка сборки, ошибка приложения

Question

Я пытаюсь развернуть свое угловое приложение на 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);

Любая помощь приветствуется. Спасибо.

edit: сборка завершается успешно и развертывается, но продолжает появляться ошибка приложения. Журналы Heroku:

2019-02-19T23: 35: 02.490703 + 00: 00 heroku [router]: at = код ошибки = H10 desc =Метод "Приложение упало" = GET path = "/" host = nhl-hockey-app.herokuapp.com request_id = cd86c7cd-aaa3-489f-b4ce-bb1c0a1f7e90 fwd = "151.202.21.77" dyno = connect = service = status = 503байт = протокол = https 2019-02-19T23: 35: 02.861982 + 00: 00 heroku [роутер]: at = код ошибки = H10 desc = метод "приложение упало" = путь GET = "/ favicon.ico "host = nhl-hockey-app.herokuapp.com request_id = 1f51f401-9349-4ae6-9d1e-a354fffff8ee fwd =" 151.202.21.77 "dyno = connect = service = status = 503 bytes = protocol = https

Answer 1

Попробуйте переместить

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

с devDependencies на dependencies ...

Answer 2

Используйте heroku-postbuild, он заменит обычный скрипт сборки.Если вы используете postinstall, приложение будет создано дважды (npm run postinstall && npm run build).Вы сможете увидеть его, когда отправите свой код на heroku.

Когда ваше приложение будет успешно построено, heroku будет использовать скрипт запуска для запуска приложения.Я не думаю, что ваш стартовый скрипт работает на heroku, потому что одновременно это модуль npm, которого я не вижу в package.json, а «ng build --watch» предназначен для локальной разработки, а не для запуска вашего кода наheroku.

Я бы порекомендовал создать Procfile для папки вашего проекта.
https://devcenter.heroku.com/articles/getting-started-with-nodejs#define-a-procfile
Heroku будет использовать эту команду для запуска вашего приложения, сервера.
Procfile:

web: node server.js