将 Angular 应用程序部署到 heroku 时出错

Question

I am trying to deploy an angular app "test-app" to heroku through github and
everything works just fine but I cant setup the express routing function.

I tried various paths but heroku just put this error.

Error: ENOENT: no such file or directory, stat '/app/test-app/index.html'

and below is my "server.js" file

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

    app.use(express.static(__dirname + "/dist"));

    app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "/dist/test-app/index.html"));
    });

    app.listen(process.env.PORT || 8080, () => {
    console.log("Connected to the server");
    });

I think I messed up something in the "path join" section.Can someone please help
me out here ?

Answer 1

Did you build your angular application with ng build?. If yes, then did you put the output of the build into the dist folder?

I would suggest the following: 1. Seperate your express server and you angular app. 2. Build your angular app and copy the output(only the html and js files not the folder with the project name) into a directory in your express app(lets say you name it dist as well). 3. In you express app you only need this: app.use(express.static(__dirname + "/dist")); and not

app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "/dist/test-app/index.html"));
});. 

You can make it work just with part 3 even if you put your express and angular app in the same workspace, but its better to seperate the two in the future as they are two different entities that interact with each other but may need a lot of development seperately.

Edit: log your __dirname and see what it shows. Most of the times app.use(express.static("dist")); is enough.