将 Angular 应用程序部署到 Heroku，构建成功但在浏览器中显示 404 not found

Question

您好，我是一名尝试在 Heroku 上部署应用程序的初学者。我之前已经成功部署了一个应用程序，但由于某种原因这次没有任何效果。我已完全按照此博客中的步骤进行操作： https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

我正在使用最新版本的 angular 和节点：
"@angular/cli": "^6.0.1", "@angular/compiler-cli": "^6.0.1", "node": "10.1.0", "npm": "6.0.0"

下面是我的构建日志和我的 package.json 文件以供参考。没有错误，但应用程序在部署后无法运行:( 请帮忙！！

-----> 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):  10.1.0
       engines.npm (package.json):   6.0.0

       Resolving node version 10.1.0...
       Downloading and installing node 10.1.0...
       Bootstrapping npm 6.0.0 (replacing 5.6.0)...
       npm 6.0.0 installed
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)

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


       > angular-chatbot@0.0.0 postinstall /tmp/build_d3da2bc92ebb72e07bb714a5a00a9e5b
       > ng build --aot

      39% building modules 245/251 modules       Date: 2018-05-11T17:54:52.577Z
       Hash: a1e28c3c7551108d3a72
       Time: 13703ms
       chunk {main} main.js, main.js.map (main) 134 kB [initial] [rendered]
       chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
       chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
       chunk {styles} styles.js, styles.js.map (styles) 134 kB [initial] [rendered]
       chunk {vendor} vendor.js, vendor.js.map (vendor) 3.03 MB [initial] [rendered]
       added 116 packages from 166 contributors, removed 24 packages, updated 41 packages and moved 7 packages in 54.687s
       [!] 13 vulnerabilities found [21934 packages audited]
       Severity: 3 low | 5 moderate | 5 high
       Run `npm audit` for more detail

-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Pruning devDependencies
       removed 806 packages in 12.697s
       [+] no known vulnerabilities found [9183 packages audited]

-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 52.6M
-----> Launching...
       Released v16
       https://c-clin-ng-chatbots.herokuapp.com/ deployed to Heroku

package.json 文件：（我必须使用 ng build --aot 而不是 ng build --aot -prod 因为后者在构建日志中给我一个错误，说 > ng build --aot -prod Unknown option: '-p'。这适用于我在我以前的应用程序中。）

{
  "name": "angular-chatbot",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot",
    "start": "node server.js"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "path": "^0.12.7",
    "rxjs": "^6.0.0",
    "typescript": "~2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  },
  "engines": {
    "node": "10.1.0",
    "npm": "6.0.0"
  }
}

Answer 1

我认为问题出在 server.js 尝试：

app.use(express.static(${__dirname}/front-end/dist/));

app.get('*', (req, res) => {
    res.sendFile(`./front-end/dist/index.html`); // load the single view file (angular will handle the page changes on the front-end)
});

其中 app 是 const app = express();

显然更改 dist 文件夹的路径。

Answer 2

如果您在 Heroku 启动应用程序页面上得到 Not found，那是因为 path 错误。

将您的 server.js 文件更新为：

// server.js

const express = require('express');
const app = express();

app.use(express.static('./dist/'));

app.get('/*', (req, res) => {
  res.sendFile('index.html', { root: 'dist/' });
});

app.listen(process.env.PORT || 8080);

将 Angular 应用程序部署到 Heroku，构建成功但在浏览器中显示 404 not found

Deploying Angular app to Heroku, build was successful but in browser it shows 404 not found

deployment

heroku

node.js

angular

angular6