Resolving 'Blocked because of a disallowed MIME type ("text/html")' Error in Angular 8 Deployment on Tomcat 9.0.30

Problem Background and Error Phenomenon

In modern web application development, the combination of Angular framework and Spring Boot backend has become a common technology stack choice. However, when migrating Angular 8 applications from embedded Tomcat to external Tomcat 9.0.30 servers, developers may encounter a specific MIME type error: the browser console displays "Loading module from 'http://localhost:8080/polyfills-es2015.js' was blocked because of a disallowed MIME type ('text/html')". This error typically occurs when the application is deployed to a non-root context path, preventing JavaScript modules from loading correctly.

Technical Principle Analysis

The core of this issue lies in the interaction between the behavior mechanism of the HTML5 <base> tag and server resource path resolution. In Angular 8, the Angular CLI generates <base href="/"> by default, specifying the base path for all relative URLs. When the application is deployed to a specific context path in Tomcat (such as http://localhost:8080/MyApp), the browser will look for JavaScript files at the root directory based on this base path, rather than searching in the actual context path.

From the server response perspective, when the browser requests http://localhost:8080/polyfills-es2015.js, since the file doesn't exist at the root directory, the Tomcat server may return a default error page (typically in HTML format) with its Content-Type header set to text/html. Modern browsers, for security reasons, block the loading of module resources with mismatched MIME types, particularly when <script> tags contain the type="module" attribute, where MIME type checking is more stringent.

Solution Implementation

Based on a deep understanding of the problem mechanism, we propose the following three solutions, each with its applicable scenarios and configuration methods.

Solution 1: Modify <base href> Configuration

The most direct solution is to modify the <base> tag in index.html during Angular build process or after deployment. If the application is deployed at http://localhost:8080/MyApp, the configuration should be changed to:

<base href="/MyApp/">

During Angular CLI build, the base path can be specified using the following command:

ng build --base-href /MyApp/

For multi-module Spring Boot projects using front-end builder, corresponding settings can be added to the build configuration in angular.json to ensure the build artifacts contain correct path information.

Solution 2: Use Relative Path Configuration

Another flexible approach is to use relative path configuration, allowing the application to work correctly under any context path:

<base href="./">

This configuration method resolves all resource requests relative to the current document's URL, avoiding hard-coded context path issues. However, it's important to note that in scenarios with complex routing configurations, relative paths may cause issues with nested route resolution.

Solution 3: Deploy to ROOT Directory

If the project permits, the Angular application can be deployed directly to Tomcat's ROOT directory (i.e., webapps/ROOT). This makes the application accessible at http://localhost:8080/, perfectly matching the <base href="/"> configuration. Implementation methods include:

1. Directly copying the contents of the built dist folder to webapps/ROOT
2. Modifying Tomcat configuration to map specific context paths to the ROOT directory
3. Using Tomcat's virtual host configuration to implement path redirection

Additional Considerations

Beyond the main solutions, developers should pay attention to the following details during actual deployment:

• File Extension Completeness: Ensure all JavaScript file references include the complete .js extension. While modern browsers can typically handle omitted extensions, in some server configurations, missing extensions may lead to incorrect MIME type inference.
• Server Configuration Optimization: Configure correct MIME type mappings in Tomcat's web.xml to ensure .js files are always served with application/javascript Content-Type. Example configuration:

<mime-mapping>
    <extension>js</extension>
    <mime-type>application/javascript</mime-type>
</mime-mapping>

• Build Configuration Verification: In the Angular project's angular.json, check the baseHref and deployUrl settings under projects.<project-name>.architect.build.options to ensure they match the target deployment environment.

Best Practice Recommendations

Based on practical project experience, we recommend the following deployment workflow:

1. Use Angular CLI's --base-href parameter to pre-configure the correct context path during development
2. Dynamically set base paths based on environment variables in continuous integration/continuous deployment (CI/CD) pipelines
3. For multi-environment deployments, consider using environment-specific configuration files to manage path settings
4. Configure appropriate error page handling on Tomcat servers to avoid returning HTML-formatted 404 responses
5. Regularly validate the index.html file in build artifacts to ensure path configurations meet expectations

By systematically understanding the interaction between Angular routing mechanisms, HTML base path principles, and Tomcat server configurations, developers can effectively prevent and resolve such MIME type blocking issues, ensuring web applications run stably across various deployment environments.