Blocked because of a disallowed MIME type (“text/html”) : Angular 8 deployed on tomcat 9.0.30 fails to serve the assets
Emily Wong 
I have a project in which the user interface is based on angular 8 and the backend is a springboot java service. The entire project is a multi module project with the angular part being a separate module with front-end builder being used to build the angular code into a single executable jar. The application runs fine when the embedded tomcat is used. I have a new requirement to try and deploy the angular ui part separately on an external tomcat . But when i copy the dist folder to the webapps folder and try to serve it , the browser blocks the request saying :
Loading module from “ was blocked because of a disallowed MIME type (“text/html”).After doing some google search I came to understand that the issue occurs because angular 8 cli fails to add the type attribute to the script tag in index.html . When i manually add the type,everything works fine. Can anyone please help me to understand why this is happening, and also a possible fix for the issue other than manual editing.
Generated index.html :
<!doctype html>
<html lang="en">
<head> <meta charset="utf-8"> <title>My Application</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <i></i> <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body> <app-root></app-root>
<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="scripts.js" defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>
</html>So, to summarize everything that works , it's as follows :
- The type attribute is no longer mandatory in HTML5, hence angular cli no longer adds it as an attribute. In embedded tomcat , the assets were being copied to the
ROOTwhich works perfectly as , when I deployed in external tomcat ,I kept the assets under a folder in webapps which meant I had to amend thebaseHreffield (either during build using command or after build manually) to reflect the same. The following works : - Keeping the assets under ROOT folder in webapps (everything works perfectly because the js files are now under the root / ).
- Keeping the files under a folder say for instance
MyAppand specifying that asbaseHrefinindex.html.
Related link
57 Answers
<base href="/">is the issue , change it to your context root . Or change it to
<base href=".">Browser is unable to find your JS file because it looks for JS file relative to base href.
Your base href= "/" , so it looks for all js file in the in "localhost:8080/", but your JS files might have present in "localhost:8080/someRoot"
One more solution you can think of is, deploying in the ROOT folder of tomcat with out context root , if that is allowed for your project
8I had this issue trouble me for a while. For those of you like me who weren't careful, make sure you have the .js at the end of the file name in the import.
The server thinks that your JS file is a HTML file.
This may be because the server-side recognition is buggy or the JS file is non-existent (and the server does not send a 404 status code?) or there is no js in it.
Because of that, it sends the Content-Type text/html.
The browser sees the content type, thinks this is no css and does not allow it.
If you specify the type(client side) or change the type server-side, it should work.
5Another reason is that the Vite bundler (Rollup?) sets the script file as an absolute path "/assets/index123.js" instead of relative "./assets/index123.js" in the index.html file
Make sure you have the .js in your import statement.
For me, I relied on VS Code to autopopulate the import for my ./add.js file, for which it wrote:
import { add } from "./add";And I saw the error in Firefox.
Loading module from “ was blocked because of a disallowed MIME type (“text/html”).
Once I added the .js to make it:
import { add } from "./add.js";It worked.
0This is a solution it worked for my vanilla JS project
Problem Desc: The browser is not able to find the files you want, thus sends you a 404 HTML page as response to your script request (waits for a js, but gets some html instead)
the import must have type="module" ex:
<script type="module" src="./main.js"></script>All the imports must finish whit .js ex:
import characterData from "./modules/data.js";If still doesn't work, remove all th imports and write it again (helps more in VSCode)
If somehow still breaks, keep the
main.jsin the root folder and add all the other to a newmodulesfolder
A couple of things have helped me during my learning phase of Typescript ES6 to solve the above error:
- Add .js at the end of the import statement. For e.g.:
import {testModule} from './Classes.js'; - In the index.html file, change the script type to "module" instead of "text/javascript".
- In
tsconfig.jsoncomment out"module": "commonjs"and replace it with"target": "ES6". - Delete all the files from your JS output folder and recompile the typescript to generate those files again.
