node.js - sendFile() 在推送到 heroku 时不发送 ng build dist/index.html 文件

Question

编辑:我唯一改变使其不起作用的是将 Angular 构建 outDir 从 ../dist 更改为 dist。现在我希望服务器发送新位置。

当我使用 ng build 构建应用程序并启动 Express 服务器时，一切正常。然而，将其推送到 Heroku 后，找不到 dist/index.html。如果我只发送一个像这样的字符串: res.send('testing)' ，但是当从 dist 发送 index.html 时，它只会显示“Not Found”，它就可以工作。

我一直在尝试多种方法来声明文件路径，这是当前的代码:`

//Set static folder
app.use(express.static(path.join(__dirname, 'angular-src/dist')));

//Index route
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'angular-src/dist/', 'index.html'));
})

`

我也尝试过仅使用 dist 和 dist/index/html

由于它在本地服务器上运行，从指定端口启动，它应该可以正常运行吗？

当我将 "dist" 文件夹与 server.js 文件放在同一目录中时，它可以在 Heroku 上运行。然后我只需输入文件夹名称而不是 dist 文件夹的路径，例如 angular-src/dist/。

自从我更新了 Angular-CLI 后，让 outDir 转到 Angular 项目之外会更困惑，所以我希望它进入“真正的”dist。

编辑:在下面添加我的整个 server.js 文件

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const config = require('./config/database');
const compression = require('compression');

//Connect to database
mongoose.connect(config.database);

//If connected to the database 
mongoose.connection.on('connected', () => {
    console.log("connected to db: " + config.database);
});
//IF there's problems with the connection to the database
mongoose.connection.on('error', (err) => {
    console.log("Db error: " + err);
});

const app = express();

const users = require('./routes/users');
const friends = require('./routes/friends');

const port = process.env.PORT || 8080;

//Cors middleware
app.use(cors());
app.use(compression);

//Set static folder
app.use(express.static(__dirname +'/dist'));

//Body parser middleware
app.use(bodyParser.json());

app.use('/users', users);
app.use('/friends', friends);

//Index route
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
})

//Start server
app.listen(port, () => {
    console.log("server started on port: "+ port);
}); 

Answer 1

您的 server.js 必须如下所示:

    const compression = require('compression');
    const path = require('path');
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 8080;

    // Gzip
    app.use(compression());

    // Run the app by serving the static files in the dist directory
    app.use(express.static(__dirname + '/dist'));

    // Start the app by listening on the default Heroku port
    app.listen(port);

    // For all GET requests, send back index.html so that PathLocationStrategy can be used
    app.get('/*', function(req, res) {
      res.sendFile(path.join(__dirname + '/dist/index.html'));
    });

    console.log(`Server listening on ${port}`);