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 时，应用在本地运行良好。

以下是应用中使用的版本：

• Angular 5.2.10
• npm 5.7.1
• 节点 9.0.0

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

2018-05-01T12:52:03.421925+00:00 应用程序 [web.1]：npm 错误！退出状态 1 2018-05-01T12:52:03.422287+00:00 应用程序 [web.1]：npm 错误！ 2018-05-01T12:52:03.422552+00:00 应用程序 [web.1]：npm 错误！失败了 puckgames@0.0.0 启动脚本。 2018-05-01T12:52:03.422819+00:00 应用[web.1]：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 应用 [web.1]：npm 错误！
/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[路由器]: at=error 代码=H10 desc="应用程序崩溃" 方法=GET 路径="/" 主机=marcums-puck-games.herokuapp.com request_id=6e709bae-f4df-497f-89e9-ddd22b8f9230 fwd="66.41.188.175" dyno=连接=服务=状态=503字节=协议=https 2018-05-01T12:52:04.326950+00:00 heroku[路由器]: at=error code=H10 desc="应用程序崩溃" 方法=GET path="/favicon.ico" 主机=marcums-puck-games.herokuapp.com request_id=a45ab870-def7-422e-974a-1e25c16191bb fwd="66.41.188.175" dyno=连接=服务=状态=503字节=协议=https

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 中创建安装后脚本 -

在"scripts"下，添加安装后命令：

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

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

添加 node 和 npm 引擎 -

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

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

复制typescript到dependencies -

将 "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 服务器来运行我们的生产就绪应用程序（来自创建的 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);

现在运行：

git push heroku your_remote_name

Heroku 将查看您的 package.json 并安装软件包。 它将运行postinstall，然后运行node server.js 来启动您的应用程序。您可以检查 Activity 选项卡并打开 Build log 以查看它的实际运行方式。希望对您有所帮助！

Answer 2

尝试复制

"@angular/cli": "1.6.8", "@angular/compiler-cli": "^5.2.0", “打字稿”：“~2.5.3”

从开发依赖到依赖