MIME type issue in Angular

"The server responded with a non-JavaScript MIME type of "text/html" This issue is nothing but the files not found.

This happens when we are trying to service angular build application using Express NodeJS with following code

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

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

app.listen(process.env.PORT || 8880);

This issue occurs when Angular is trying to access some files which are not found

Issues resolved with following Express code

const _port = 4100;
const _app_folder = 'dist/application';
const app = express();

// ---- SERVE STATIC FILES ---- //
app.get('*.*', express.static(_app_folder, {maxAge: '1y'}));

// ---- SERVE APLICATION PATHS ---- //
app.all('*', function (req, res) {
    res.status(200).sendFile(`/`, {root: _app_folder});
});

// ---- START UP THE NODE SERVER  ----
app.listen(_port, function () {
    console.log("Node Express server for " + app.name + " listening on http://localhost:" + _port);
});

This should resolve your issues.


after a long search this is what helped me. Ang9 does not include a MIME type in tags in index.html :

if in tsconfig.json: "target": "es2015" then add type="module"

<script src="runtime-es2015.703a23e48ad83c851e49.js" type="module">`

or if "target": "es5" add nomodule

<script src="runtime-es5.465c2333d355155ec5f3.js" nomodule>

angular routes to root of your domain. deploying to subfolder might reference correctly:

ng build --prod --base-href yoursubfolder