Heroku部署Angular 4应用：仅显示首页及HTML未编译问题求助

Hey there! Let’s work through these two frustrating deployment issues with your Angular 4 app on Heroku. I’ve dealt with similar hiccups before, so let’s break each problem down and fix them one by one.

Issue 1: Only Homepage Loads with Errors #

If your app loads the homepage but throws errors when navigating to other routes, or breaks on refresh, this is almost always a routing or server configuration problem. Here’s what to check:

• Use Hash Location Strategy (Quick Fix)
  Angular’s default PathLocationStrategy relies on the server rewriting URLs to point to your index.html. Heroku doesn’t do this out of the box. A quick fix is to switch to HashLocationStrategy in your app module:

  import { LocationStrategy, HashLocationStrategy } from '@angular/common';
  
  @NgModule({
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
  })
  export class AppModule { }
  

  This adds # to your URLs (like https://your-app.herokuapp.com/#/about) and avoids server-side routing issues.

• Configure Server for Path Location Strategy
  If you prefer clean URLs without the hash, create a static.json file in your project root to tell Heroku how to handle routing:

  {
    "root": "dist/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }
  

  Make sure this file gets committed to Git so Heroku picks it up.

• Check Your Server Script (If Using Express)
  If you’re serving the app with an Express server, ensure it’s configured to serve static files and redirect all routes to index.html:

  const express = require('express');
  const path = require('path');
  const app = express();
  
  // Serve static files from the dist folder
  app.use(express.static(path.join(__dirname, 'dist/your-app-name')));
  
  // Redirect all requests to index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
  });
  
  // Use Heroku's assigned port
  const port = process.env.PORT || 4200;
  app.listen(port, () => {
    console.log(`Server running on port ${port}`);
  });
  

  Double-check that your package.json has a start script pointing to this server: "start": "node server.js".

Issue 2: Deployment Succeeds but HTML Isn’t Compiled #

If you’re seeing raw Angular templates (like {{ variable }}) instead of rendered content, that means your app wasn’t built for production before deployment. Here’s how to fix it:

• Fix Your Package.json Scripts
  Heroku runs npm install and then npm start, but you need to trigger a production build during deployment. Add a postinstall script to your package.json—this runs automatically after npm install:

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

  Also, make sure @angular/cli and @angular/compiler-cli are in your dependencies (not just devDependencies), because Heroku doesn’t install dev dependencies by default:

  "dependencies": {
    "@angular/cli": "^1.7.4",
    "@angular/compiler-cli": "^4.4.7",
    // ... other dependencies
  }
  

• Verify Node.js Version Compatibility
  Angular 4 works best with Node.js 8.x or 10.x. Specify the correct version in your package.json to avoid build failures from incompatible Node versions:

  "engines": {
    "node": "8.x",
    "npm": "5.x"
  }
  

• Check Dist Folder Deployment
  Ensure your .gitignore file isn’t excluding the dist folder (though you shouldn’t commit dist—the postinstall script should generate it on Heroku). If you accidentally committed dist, delete it locally, update .gitignore, and push the changes.

Final Steps to Test #

1. Commit all changes to Git: git add . && git commit -m "Fix deployment issues"
2. Push to Heroku: git push heroku main
3. Check the build logs with heroku logs --tail to spot any hidden errors during the build process.

Let me know if you hit any snags while working through these steps—I’m happy to help debug further!

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