初学Angular/Node：部署至Heroku时的问题及空白页异常

Hey there! Glad you got past the initial crash—let's figure out why your Angular app's dist/index.html is showing a blank page on Heroku. Here are the most common fixes to check step by step:

1. Double-Check Your Angular Build Output Path #

Angular CLI (version 6+) defaults to building your app into a subfolder inside dist/, like dist/your-app-name/, not directly into the root dist/ directory. If your server.js is pointing to dist/ instead of the correct subfolder, it'll serve an empty index.html (or none at all).

• First, confirm your angular.json has the right outputPath:

  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-app-name"
          }
        }
      }
    }
  }
  

• Then update your server.js to point to that subfolder for static files and the fallback route:

  const path = require('path');
  const express = require('express');
  const app = express();
  
  // Serve static files from the Angular build output
  app.use(express.static(path.join(__dirname, 'dist/your-app-name')));
  
  // Fallback all non-API routes to Angular's index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
  });
  
  const PORT = process.env.PORT || 3000;
  app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
  });
  

2. Verify Heroku is Running the Angular Production Build #

Heroku needs to build your Angular app during deployment—if it's not generating the dist/ folder correctly, you'll get a blank page.

• Check your package.json scripts to ensure you have a build command and a postinstall hook (Heroku runs this after npm install):

  "scripts": {
    "start": "node server.js",
    "build": "ng build --configuration production",
    "postinstall": "npm run build"
  },
  "engines": {
    "node": "18.x",
    "npm": "9.x"
  }
  

  • The engines field ensures Heroku uses the same Node/npm versions as your local environment (match what you have locally with node -v and npm -v).
  • If you're using an older Angular version, replace --configuration production with --prod.

3. Check the Base Href in Your Angular App #

A misconfigured base href can prevent Angular from loading its JS/CSS bundles, leading to a blank page.

• When building, make sure you set the base href to match your Heroku app's root path (most apps use /):

  ng build --configuration production --base-href /
  

• Or add it directly to your package.json build script:

  "build": "ng build --configuration production --base-href /"
  

• You can also verify the dist/index.html file to ensure the base tag is correct:

  <base href="/">
  

4. Review Heroku Logs for Clues #

Even if the app isn't crashing, logs can reveal hidden issues like missing files or build errors. Run this command in your terminal to view real-time logs:

heroku logs --tail

Look for errors like:

• ENOENT: no such file or directory, stat '/app/dist/index.html' → Path mismatch (you're pointing to the wrong folder)
• Failed to load resource: the server responded with a status of 404 (Not Found) → JS/CSS bundles are missing (base href or build path is wrong)

5. Confirm Procfile is Correct #

Make sure your Procfile is pointing to the right server script (no typos!):

web: node server.js

Heroku uses this to know how to start your app—if the path to server.js is wrong, it might not serve the static files correctly.

Start with the first two checks (build path and server.js routes)—those are the most common culprits. Let me know if any of these fix it, or if you see specific errors in the logs!

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