Blocked because of a disallowed MIME type (“text/html”) : Angular 8 deployed on tomcat 9.0.30 fails to serve the assets
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 “http://localhost:8080/polyfills-es2015.js” 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 class="fas fa-chart-area"></i>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body style="margin: 0;">
<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
Answer
<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