Menu
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 :
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 :MyApp and specifying that as baseHref in index.html .Related link
619
<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
120
I 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.
41
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.
9
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
