How to Fix Angular Distribution Built Showing a white Screen on Browser

Question

I am new to angular and i have built my first test app. I want to take a look at how it works and all. It works perfectly in nodejs. After i run the 'ng build --prod', dist folder is made. By following an online tutorial i made a nodejs server which directs to the static dist/index.html file.

To Fix this I checked the browser console for error and found Uncaught SyntaxError: Unexpected token < in all of the js files. So i looked at the Application>Frames>top>Scripts in Chrome Dev tools and saw that all js file contains html code as index.html in them

server.js

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

const admin = require('./server/routes/admin');

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

app.use('/admin', admin);

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

const port = process.env.port || 4600;

app.listen(port, (req, res)=>{
    console.log(`Server ONLINE at ${port}`);
});

Though the Angular site must be shown when the localhost is visited, i get a white page.

Answer 1

Fixed it. For anyone who have the same problem

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

this line code actually caused the problem. After building the angular project. It was save in dist/my-app/ directory. So by changing above line of code to,

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

Fixed the problem. Hope it will help someone