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
node 9.0.0

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

2018-05-01T12：52：03.421925 + 00:00 app [web.1]：npm ERR！退出状态1   2018-05-01T12：52：03.422287 + 00:00 app [web.1]：npm ERR！   2018-05-01T12：52：03.422552 + 00:00 app [web.1]：npm ERR！失败了   puckgames@0.0.0启动脚本。 2018-05-01T12：52：03.422819 + 00：00   app [web.1]：npm ERR！这可能不是npm的问题。有   可能是上面的额外日志输出   2018-05-01T12：52：03.431523 + 00:00 app [web.1]：   2018-05-01T12：52：03.431832 + 00:00 app [web.1]：npm ERR！一个完整的日志   该运行的可以在：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 =＆＃34; App崩溃＆＃34; method = GET path =＆＃34; /＆＃34;   主机= marcums-puck-games.herokuapp.com   request_id = 6e709bae-f4df-497f-89e9-ddd22b8f9230 fwd =＆＃34; 66.41.188.175＆＃34;   dyno = connect = service = status = 503 bytes = protocol = https   2018-05-01T12：52：04.326950 + 00:00 heroku [router]：at =错误代码= H10   desc =＆＃34; App崩溃＆＃34; method = GET path =＆＃34; /favicon.ico"   主机= marcums-puck-games.herokuapp.com   request_id = a45ab870-def7-422e-974a-1e25c16191bb fwd =＆＃34; 66.41.188.175＆＃34;   dyno = connect = service = status = 503 bytes = protocol = 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

尝试复制

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

从devdependencies到依赖

Answer 2

Heroku要求您的应用拥有后端。为此，我们会将node和express添加到您的应用中。我可以看到您的package.json中已经存在大部分更改，但仍然需要执行以下步骤，请确保您遵循以下所有步骤：

在您的package.json 中，复制

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

从devDependencies到dependencies。

在package.json中创建一个postinstall脚本 -

在"scripts"下，添加一个postinstall命令：

"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要使用的打字稿版本。

安装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以启动您的应用程序。您可以检查“活动”选项卡并打开“构建日志”以查看其实际运行情况。希望它有所帮助！

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

2 个答案: