Angular 5部署到Heroku失败，应用程序错误H10

Question

我正在使用Github部署在Heroku上部署一个Angular 5应用程序。Heroku上的构建过程成功完成。下面是生成日志：

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  9.0.0
       engines.npm (package.json):   5.7.1

       Resolving node version 9.0.0...
       Downloading and installing node 9.0.0...
       Bootstrapping npm 5.7.1 (replacing 5.5.1)...
       npm 5.7.1 installed
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

       > uws@9.14.0 install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/uws
       > node-gyp rebuild > build_log.txt 2>&1 || exit 0


       > node-sass@4.8.3 install /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
       > node scripts/install.js

       Downloading binary from https://github.com/sass/node-sass/releases/download/v4.8.3/linux-x64-59_binding.node
       Download complete
       Binary saved to /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
       Caching binary to /tmp/npmcache.6p2xH/node-sass/4.8.3/linux-x64-59_binding.node

       > uglifyjs-webpack-plugin@0.4.6 postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
       > node lib/post_install.js


       > node-sass@4.8.3 postinstall /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass
       > node scripts/build.js

       Binary found at /tmp/build_f955e847c7812f77225546f9f0519385/node_modules/node-sass/vendor/linux-x64-59/binding.node
       Testing binary
       Binary is fine

       > puckgames@0.0.0 postinstall /tmp/build_f955e847c7812f77225546f9f0519385
       > ng build --aot -prod

       Date: 2018-05-01T12:51:14.033Z
       Hash: bae98aa0ec3557461128
       Time: 54842ms
       chunk {0} polyfills.46af3f84a403e219371b.bundle.js (polyfills) 59.7 kB [initial] [rendered]
       chunk {1} main.2c0ad66a3c04faa09c51.bundle.js (main) 393 kB [initial] [rendered]
       chunk {2} styles.63956080a26a0ea45a51.bundle.css (styles) 48.1 kB [initial] [rendered]
       chunk {3} inline.63bc67a6d5411e8cbf28.bundle.js (inline) 1.45 kB [entry] [rendered]
       added 1502 packages from 1260 contributors in 105.406s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 1484 packages in 15.39s
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 36.7M
-----> Launching...
       Released v3

我的应用程序从来不会因为应用程序错误而运行。当使用NPM Start或Heroku local Web时，应用程序在本地运行良好。

以下是应用程序中正在使用的版本：

• 角度5.2.10
• NPM 5.7.1
• 节点9.0.0

我收到以下错误,不知道如何解决：

2018-05-01T12:52:03.421925+00:00APP[Web1]:npm错误！退出状态1 2018-05-01T12:52:03.422287+00:00APP[Web1]:npm错误！2018-05-01T12:52:03.422552+00:00APP[Web1]:npm错误！puckgames@0.0.0启动脚本失败。2018-05-01T12:52:03.422819+00:00APP[Web1]:npm错误！这可能不是NPM的问题。上面可能有其他日志记录输出。2018-05-01T12:52:03.431523+00:00应用程序[Web.1]:2018-05-01T12:52:03.431832+00:00应用程序[Web.1]:npm错误！此运行的完整日志可在:2018-05-01T12:52:03.432041+00:00 app[web.1]:npm err！
/app/.npm/_logs/2018-05-01T12_52_03_424z-debug.log 2018-05-01T12:52:03.482946+00:00 heroku[web.1]:进程退出状态1 2018-05-01T12:52:03.910224+00:00 heroku[router]:at=error code=h10 desc=“app死机”method=get path=“/”host=marcums-puck

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
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log('Express server listening on port', port)
});

package.json文件

{
  "name": "puckgames",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot -prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^5.2.5",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.5",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
    "typescript": "~2.5.3"
  },
  "devDependencies": {
    "@angular/cli": "1.6.8",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  },
  "engines": {
    "node": "9.0.0",
    "npm": "5.7.1"
  }
}

我们将不胜感激。如果我忽略了提供调试此部署所需的任何内容，请告诉我。谢谢你抽出时间。

Answer 1

Heroku要求您的应用程序具有后端。为此，我们将在应用程序中添加node和express。我可以看到您的package.json中已经出现了大部分更改，但仍然要执行以下步骤，并确保您遵循了下面提到的所有步骤：

在您的package.json中，复制

"@angular/cli": "1.7.3"", "@angular/compiler-cli": "^5.2.0" 

从devdependencies到dependencies。

在package.json中创建一个后安装脚本-

在“脚本”下，添加postinstall命令：

"postinstall": "ng build --aot --prod"

这告诉Heroku使用提前(AOT)编译器构建应用程序，并使其生产就绪。这将创建一个dist文件夹，我们应用程序的所有html和javascript转换版本都将从该文件夹启动。

添加节点和NPM引擎-

您将需要添加Heroku将用于运行应用程序的节点和NPM引擎。最好是与机器上的版本相同。因此，运行node-v和npm-v以获得正确的版本，并将其包含在package.json文件中，如下所示：

"engine": { "node": "8.9.4", "npm": "5.6.0" }

将Typescript复制到依赖项-

将“typescript”：“~2.5.3”从devdependencies复制到dependencies以通知Heroku要使用的typescript版本。

安装Enhanced Resolve 3.3.0:

运行以下命令：

npm install enhanced-resolve@3.3.0 --save-dev

安装服务器以运行应用程序：

在本地，我们从终端运行ng serve在本地浏览器上运行应用程序。但是我们将需要设置一个Express服务器来运行我们的production ready应用程序（从创建的dist文件夹），以确保轻量级和快速加载。通过运行以下操作安装Express server：

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);

现在运行：

git push heroku your_remote_name

Heroku将查看package.json并安装包。它将运行postinstall，然后运行节点server.js来提升应用程序。您可以检查activity选项卡并打开构建日志来查看它实际是如何运行的。希望有帮助！