Blocked because of a disallowed MIME type (“text/html”) : Angular 8 deployed on tomcat 9.0.30...

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 ROOT which works perfectly as , when I deployed in external tomcat ,I kept the assets under a folder in webapps which meant I had to amend the baseHref field (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 MyApp and specifying that as baseHref in index.html .

Related link

Continue reading...