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

Posted 2023-03-07

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

【英文标题】：Deploying Angular app to Heroku, build was successful but in browser it shows 404 not found

【发布时间】：2018-10-22 04:52:33

【问题描述】：

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

我正在使用最新版本的 angular 和 node： "@angular/cli": "^6.0.1", "@angular/compiler-cli": "^6.0.1", “节点”：“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"
  

【问题讨论】：

一开始我以为您使用的是 heroku 不支持的 nodejs/npm 版本。但似乎他们支持他们devcenter.heroku.com/articles/nodejs-support#node-js-runtimes你为什么不尝试一些旧版本？ "node": "10.1.0" 是他们支持的最新版本 :D

我看到了错误 Cannot GET / 。你能发布你的 server.js 文件的 nodejs 路由吗？

【参考方案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 文件夹的路径。

【讨论】：

你说得对，我的路错了。它现在终于可以工作了。非常感谢您的帮助！！

我的应用程序根本无法编译。 > thff-fe@0.0.0 postinstall /tmp/build_47569a89d3fad6f61d1a588169345d23 > ng build -aot 未知选项：'-a'

nvm 选项是 --aot，我只有 1 个破折号