Overview

When deploying an Angular 8 application on Tomcat 9.0.30, developers might encounter an error related to a disallowed MIME type, specifically "text/html". This issue can prevent the application from serving its assets, leading to broken or non-functional web applications. This article tackles the root cause of this issue and offers potential solutions to ensure that the assets are correctly served by the Tomcat server.

Understanding MIME Types

MIME (Multipurpose Internet Mail Extensions) types are a way to describe the content type being transmitted over the web. For an Angular application, the assets like JavaScript files, stylesheets, and images have specific MIME types, such as text/javascript, text/css, and image/png. If these MIME types are incorrect or disallowed, the browser might refuse to handle the files.

The Problem

Error Message

When deploying an Angular application, you may get the error:

Blocked because of a disallowed MIME type (“text/html”)

This typically occurs when you attempt to load JavaScript or CSS files, and the server responds with "text/html" instead of the expected MIME type.

Explanation

This error often arises because:

• The server's configuration is flawed.
• The file or asset is not found, leading the server to return an HTML error page instead.
• An incorrect deployment path might result in the server defaulting to serving files as "text/html".

Technical Explanation

The Angular application expects each asset file to be served with a correct MIME type. However, when a requested file isn't found, the server usually returns a 404 error page. If this error page is served with the "text/html" MIME type, it can trigger the mentioned error.

Consider the following typical request and response:

Example:

• Request: GET /assets/main.js
• Response: 404 Not Found with "text/html" content

If the Angular app expects "text/javascript" but receives "text/html", it results in the MIME type error.

Solution

To resolve the MIME type error, follow these solutions:

1. Verify Asset Paths

Ensure that the paths to the assets in the angular.json file are correctly set:

1"outputPath": "dist/app-name",
2"index": "src/index.html",
3"main": "src/main.ts",
4"polyfills": "src/polyfills.ts",
5"assets": [
6  "src/favicon.ico",
7  "src/assets"
8]

2. Correct Server Configuration

Ensure Tomcat is correctly configured to serve the appropriate MIME types. You can do this by editing the web.xml file:

1<mime-mapping>
2  <extension>js</extension>
3  <mime-type>text/javascript</mime-type>
4</mime-mapping>
5<mime-mapping>
6  <extension>css</extension>
7  <mime-type>text/css</mime-type>
8</mime-mapping>

3. Debugging

• Use browser developer tools to inspect the network requests and responses.
• Ensure that requests return a 200 OK status for all assets.

4. Deployment Verification

Double-check the deployment to ensure that all resources are correctly uploaded to the server. Verify the directory structure.

Table: Key Points to Remember

Additional Considerations

• Tomcat Logs: Reviewing the logs in logs/catalina.out can provide insights if there are any server-side issues.
• Security Concerns: Ensure that no critical information is exposed in error pages. Consider customizing 404 pages to avoid disclosure of server setup details.

Conclusion

Blocked MIME types can be a frustrating issue when deploying Angular applications on Tomcat, but understanding the underlying mechanics makes it easier to diagnose and solve. By ensuring assets are correctly served with appropriate MIME types, and validating configurations both on the Angular and server-side, developers can ensure smooth application deployment and operation.