MIME type issue in Angular

Question

I am getting the following error when I try to load my home page and the page is blank.

main-es2015.5ff489631e1a2300adb7.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

runtime-es2015.2c9dcf60c8e0a8889c30.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

vendor-es2015.02ac05cd7eee1cf62f5a.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

This was working before and it is working correctly in dev while serving using ng serve. The issue happens when the code is running from server. When I checked from the devtools, it is showing the content-type and text/html instead of application/javascript. How this can be fixed ? There is something needs to be set from the server ?

Answer 1

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

ng build --prod --base-href yoursubfolder

Answer 2

"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.

Answer 3

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>