Angular应用部署Heroku：构建成功但浏览器显示404错误求助

Hey there! Let's figure out why your Angular 6 app is throwing a 404 after deploying to Heroku even though the build succeeded. The most likely culprits here are incorrect static file path configuration or a missing/misconfigured server.js file—since your build logs look totally clean, the issue is almost certainly how Heroku is serving your Angular assets.

1. First, Make Sure You Have a Proper server.js File #

Angular is a single-page application (SPA), so you need an Express server to serve your static files and handle routing (otherwise, refreshes or direct URL access will also throw 404s). Your package.json references node server.js in the start script, but if this file is missing or points to the wrong directory, Heroku can't find your app's core index.html file.

Here's the correct server.js tailored to your project (note the path: Angular 6 CLI outputs build files to dist/<your-project-name> by default, which is dist/angular-chatbot for your app):

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

// Serve static files from the Angular build directory
app.use(express.static(__dirname + '/dist/angular-chatbot'));

// Handle all routes by returning the Angular index.html (critical for SPA routing)
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/angular-chatbot/index.html'));
});

// Listen on the port provided by Heroku, or 5000 for local testing
app.listen(process.env.PORT || 5000);

2. Fix Your Build Scripts & Paths #

Angular 6 changed the default build output directory from dist/ to dist/<project-name>—this is probably the root cause of your 404, since older setups might have pointed directly to dist/.

Also, let's clean up your package.json scripts to avoid confusion:

• In Angular 6+, the --prod flag already includes --aot, so you can simplify your postinstall script to ng build --prod (the "Unknown option: '-p'" error happened because you used a single dash -prod instead of double dashes --prod!).
• Update your scripts section to look like this:

  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --prod",
    "start": "node server.js"
  }
  

3. Test Locally First to Catch Issues Early #

Before pushing to Heroku, verify your setup works on your machine:

1. Run npm install to install all dependencies
2. Run npm run build to generate your production build
3. Run npm start to launch the Express server
4. Visit http://localhost:5000—if your app loads correctly, you're ready to deploy!

4. Re-Deploy to Heroku #

Commit your updated server.js and package.json changes, then push to Heroku again. The 404 error should disappear, and your app will load as expected.

This fix works because the Express server correctly serves your Angular build files from the right directory, plus it handles SPA routing (so all URLs point back to index.html, preventing 404s when users refresh or navigate directly to subpages).

内容的提问来源于stack exchange，提问作者catherine