CODEWITHSUNDEEP
angularmime-typescontent-type
Happy Coder
Happy Coder

Reputation: 4702

MIME type issue in Angular

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 ?

Upvotes: 21

Views: 41558

Answers (3)

Alok Adhao
Alok Adhao

Reputation: 406

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

Upvotes: 5

LidiaWebDev
LidiaWebDev

Reputation: 55

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>

Upvotes: 2

Arthur Zennig
Arthur Zennig

Reputation: 2194

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

ng build --prod --base-href yoursubfolder

Upvotes: 10

Related Questions