Why I'm getting a blank page from running a node server that point to the /dist folder of an Angular app?

Question

My simple node server is:

const express = require('express');
const app = express();

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

app.listen(3335, () => { console.log('Server is listening on 3335'); });

But I'm getting the index file that seems not running the main.js The Angular app, at the moment it's literally a page/component that is app.component.ts, so there is not any routing.

Answer 1

Use express.static() for serving static files.

It is because you have set a response of 'index.html' file for each and every request the server would receive. The first response would be good that's the index.html page only as expected. But, the index.html page must be having some script and css tags to fetch your Angular Javascript code which I assume would be on the same node server. So when the browser would encounter a line like:

<script src="/angularApp.js"></script>

..in your index.html file while parsing it, it would make another request to the node server for http://localhost:<port>/angularApp.js but would get the index.html file as the response as that is what you have set.

Do it like this to serve static files like .html, .css, .js or what have you:

app.use(express.static(path.join(__dirname, '/dist')));