21

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 ?

Happy Coder
  • 4,255
  • 13
  • 75
  • 152
  • @Dimanoid where to set this ? In the server or in Angular ? – Happy Coder Jun 19 '19 at 07:45
  • Did you ever get an answer to this question? – DeadlyChambers Oct 18 '19 at 19:15
  • 1
    Nope. Actually my issue was related to Amazon Cloudfare as it was not resolving the files correctly due to an issue with timezones. When that is fixed, application is working normally. – Happy Coder Oct 24 '19 at 08:39
  • How did you fix this with AWS? – SeanRtS Apr 11 '20 at 17:01
  • I was using Amazon CloudFront (not cloudflare) as the CDN and cache for the website. It was sending wrong timestamp and thus the issue has happened. It has been resolved by changing some time zone settings I think, but not sure as it has been resolved by the server admin. – Happy Coder Apr 15 '20 at 15:07
  • With Akamai CDN we occasionally get a situation where incorrect files are aggressively cached, (perhaps a buggy deployment served them up with wrong headers which allowed it to cache them) and it's necessary to go in to the control panel and explicitly flush the cache. Just an idea. – Ed Randall Oct 01 '21 at 06:46

3 Answers3

10

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

ng build --prod --base-href yoursubfolder
Arthur Zennig
  • 2,058
  • 26
  • 20
  • As I mentioned in the comment, the issue was related with Cloudfare Cache time zone settings and is fixed when the cloudfare issue is fixed. – Happy Coder Dec 09 '19 at 08:36
  • 1
    TZ fact noted. The same error occurred to me and subdomain solution did fix the trouble. Added the solution to the question, despite the previous tz comment, for those who would bump into the subdomain issue. – Arthur Zennig Dec 09 '19 at 09:33
  • Thanks! The message `The server responded with a non-JavaScript MIME type of "text/html"` was simply a not-found HTML page returned. – Jeppe Apr 25 '20 at 10:34
5

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

Alok Adhao
  • 447
  • 5
  • 6
2

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>
LidiaWebDev
  • 45
  • 3