Express routing static file: Failed to load module script

Question

I'm serving my Angular 9 application the same way I always have, and this is the first time I'm experiencing this issue.

I keep getting the following error: "Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html".

I've scoured the net for answers and can't seem to find anything that fixes it. Everything I have done seems to adhere to the advice given. I'm wondering if this is a new issue with Angular v9?

My express app.js is located in another folder to my Angular project. Below is my folder structure:

• client

  • dist
    • index.html

• middle-tier

  • app.js

app.js:

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

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

The file path is correct, I've consoled logged it and it all adds up. I changed the output path in the angular.json also to just dist instead of having another subfolder.

I am still getting this error.

Answer 1

You have to use express.static() for that:

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

The issue here is that you always respond with index.html file and if the file contains some <script> tags then the browser would expect to receive a .js file but your server responds with a .html file and that's why you get the error.