通过创建 server.js 在 Heroku 上部署 Angular 的问题答案

【问题标题】：Problem with deploying Angular on Heroku by creating server.js通过创建 server.js 在 Heroku 上部署 Angular 的问题
【发布时间】：2025-12-07 10:55:01
【问题描述】：

我在 Heroku 上部署应用时遇到了一些问题。

首先：我不明白为什么我在 CSS 文件中有一些内存限制？

后来我清理了所有列出的 CSS 文件后解决了这个问题（屏幕如下）

This errors that I fixed later

然后我遇到了不同的问题。我看到了几个关于如何在 Heroku 上部署 Angular 应用程序的示例，并且有明显相同的“server.js”，但我仍然不明白为什么我们需要使用“./dist”以及我看到的所有示例 - 我很困惑我们如何找到 index.html？

这是 server.js 的外观示例。

const express = require('express');

const app = express();

app.use(express.static('./dist/angular-heroku'));

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

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

这是我的实现：

const express = require('express');

const app = express();

app.use(express.static('./dist/Web-App'));

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

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

所以 Web-App 是我保存 Angular 项目的文件夹，但我很困惑：我在“Web-App/src/index.html”中有“index.html”。它如何在不包含至少“/src”方向的情况下找到 index.html？

这是我的 package.json：

{
  "name": "Web-App",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --prod",
    "postinstall": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.1.2",
    "@angular/cli": "^11.2.1",
    "@angular/common": "~11.1.2",
    "@angular/compiler": "~11.1.2",
    "@angular/compiler-cli": "^11.1.2",
    "@angular/core": "~11.1.2",
    "@angular/forms": "~11.1.2",
    "@angular/platform-browser": "~11.1.2",
    "@angular/platform-browser-dynamic": "~11.1.2",
    "@angular/router": "~11.1.2",
    "bootstrap": "^4.6.0",
    "bootstrap-icons": "^1.3.0",
    "express": "^4.17.1",
    "jquery": "^3.5.1",
    "path": "^0.12.7",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "typescript": "~4.1.2",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1101.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "ejs": "^3.1.6",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0"
  },
  "engines": {
    "node": "10.19.0",
    "npm": "6.14.11"
  }
}

当我部署我的应用程序时，它只显示“错误”作为标题，并且只有这个：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Not Found</pre>
</body>
</html>

【问题讨论】：

请检查“dist/Web-App/”的路径是否正确？

标签： node.js angular express heroku

【解决方案1】：

按照 this 教程在 heroku 中部署 Angular 应用程序。这对我有用。

【讨论】：

【解决方案2】：

问题在于我的应用程序名称不同，它位于 /dist/ 中。

名称与我的应用名称完全不同。

我只是决定在生成“dist”方向时检查一切是否正常。

所以我去了“ng build”，发现 /dist 方向有不同的名称。

还要解决大小问题，您需要在“angular.json”预算中更改它

budgets

【讨论】：