如何在heroku中部署我的角度项目？答案

【问题标题】：How to deply my angular project in heroku?如何在heroku中部署我的角度项目？
【发布时间】：2019-03-09 21:59:18
【问题描述】：

我正在关注 tutorial 关于如何在 heroku 中部署 Angular 项目，但对我来说不工作只是简单的 ng new my-app，该项目在我的本地运行良好，但在 heroku 崩溃时，这个是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/<name-of-app>'));

app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'/dist/<name-of-app>/index.html'));
});

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

heroku 的日志中出现以下错误。

    Build started by user *******

    2019-03-09T12:40:39.881315+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=client-platon.herokuapp.com request_id=de6958cf-3dc6-46c9-9184-447d07fc1 fwd="177.049.203.292" dyno= connect= service= status=503 bytes= protocol=https

    2019-03-09T12:41:08.000000+00:00 app[api]: Build failed -- check your build output: https://dashboard.heroku.com/apps/a2cd5214-2a58-4f1d-a20d-06af1d704234/activity/builds/545bbf7f-e1e0-451f-8faa-b5e8c9ff1543

2019-03-09T16:27:21.608342+00:00 app[web.1]: npm ERR! platon@0.0.0 start: `node server.js`

Disconnected from log stream. There may be events happening that you do not see here! Attempting to reconnect...

    2019-03-09T16:27:21.606643+00:00 app[web.1]: npm ERR! errno 1

    2019-03-09T16:27:21.608342+00:00 app[web.1]: npm ERR! platon@0.0.0 start: `node server.js`

我已经安装了 express 模块并按照所有教程进行操作。

打包json文件

{
  "name": "platon",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot -prod",
    "heroku-postbuild": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/cli": "^7.3.5",
    "@angular/compiler-cli": "^7.2.8",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "express": "^4.16.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26",
    "typescript": "~3.2.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "^7.3.5",
    "@angular/compiler-cli": "^7.2.8",
    "@angular/language-service": "~7.2.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "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": "~3.2.2"
  },
  "engines": {
    "node": "10.14.1",
    "npm": "6.7.0"
  }
}

【问题讨论】：

向我们展示您的project.json 文件
我已经发布了json文件

标签： node.js angular heroku angular-cli

【解决方案1】：

我认为需要进行一些更改。在 server.js 文件中，输入您的应用名称 insted _dirName 在 package.json 中，改变 "postinstall": "ng build --aot --prod",

它只是--产品。试试这个，你就可以按照这个教程学习了。

https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

【讨论】：

【解决方案2】：

更改 server.js 文件：-

const express = require('express');
const http = require('http')
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

const port = process.env.PORT || 3000;
app.set('port', port);

const server = http.createServer(app);
server.listen(port, () => console.log('running'));

【讨论】：