Menu
I'm surprised that there are so many questions regarding the same problem but there are no good answers anywhere. In fact this question doesn't even have a single answer. Anyway, my problem is much similar. Everything was working fine before I decided to run my frontend and backend both on same port (PORT 3000 in my case). I followed these steps:
ng build --prod to compile development file. A dist folder was created.pm2 start server.js.Well I know from where did these lines come in index.html:
script src="runtime-es2015.858f8dd898b75fe86926.js" type="module"
script src="polyfills-es2015.5728f680576ca47e99fe.js" type="module"
script src="runtime-es5.741402d1d47331ce975c.js" nomodule>
script src="polyfills-es5.7f43b971448d2fb49202.js" nomodule>
script src="main-es2015.ec7a803b995f0d691eeb.js" type="module">
script src="main-es5.1cd51b4ce24f28c1391b.js" nomodule>
But now they are creating these errors:
Loading module from “http://localhost:3000/runtime-es2015.858f8dd898b75fe86926.js” was blocked because of a disallowed MIME type (“text/html”).
Loading module from “http://localhost:3000/polyfills-es2015.5728f680576ca47e99fe.js” was blocked because of a disallowed MIME type (“text/html”).
Loading module from “http://localhost:3000/main-es2015.ec7a803b995f0d691eeb.js” was blocked because of a disallowed MIME type (“text/html”).
I tried setting type=text/javascript and many more solutions and hacks. But nothing is working.
PS: Here is the entire project before build. View its README also.
800
The problem you have, is that your javascript files are not being found by the server. It returns an error header with status code like 404 (Not Found), 401 (Unauthorized) and an html page somewhere along these lines:
<html>
<body>
ERROR 404: NOT FOUND
</body>
</html>
Since the browser expects a javascript file (the default MIME Type of the script element is type="text/javascript"), it will complain when it receives an HTML-file.
You can see the server response (status code and the actual html) in the developer tools of your browser. Go to the Network tab and click one of the javascript file to see the headers and the content of the response.
69
Perhaps not directly relevant for the OP, but may help others that end up here.
The same error may arise if you import statement does not have the .js extension.
For example, during local development in Firefox (v94), a main script trying to import from a "module" in the same folder as follows will generate the error:
import { MyClass } from './my_module';
This can be fixed by adding the .js extension:
import { MyClass } from './my_module.js';
For me, the error got solved when I served my dist folder with app.use(express.static(path.join(__dirname, "..", "dist")));. Your path may be different.
Before serving the static JS files, the server wasn't able to find them, but now he does.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
