Resolving MIME Type Errors in Angular Applications Deployed on Kubernetes

Error Overview and Scenario Description

When developers deploy Angular applications as static webpages on Kubernetes clusters, they may observe that the app loads but displays a blank page in Google Chrome. Checking the browser console reveals an error message: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec." This error targets key JavaScript files such as main.js, polyfills.js, and runtime.js, preventing proper application rendering.

Root Cause Analysis

According to the best answer, the core issue stems from the application being deployed in a subdirectory (e.g., /issuertcoetools), while Angular attempts to fetch resources from the root URL. This mismatch causes the server to return HTML responses (like index.html) instead of JavaScript module files, as the paths do not align. Modern browsers enforce strict MIME type checking, throwing the error when the expected JavaScript module (application/javascript) receives HTML content (text/html).

Primary Solution: Setting the Correct Base Path During Build

To resolve this, use the --base-href flag during the Angular build process to specify the subdirectory path. For example, for deployment to /issuertcoetools, run the following command:

ng build --prod --base-href /issuertcoetools

This ensures that the generated index.html file includes the correct <base href="/issuertcoetools/"> tag, allowing resources to be loaded from the appropriate path. This approach avoids manual modifications to build output files, enhancing maintainability.

Supplementary References and Optimization Suggestions

Other answers provide additional perspectives: Answer 2 suggests disabling browser cache to avoid interference from stale files, which can serve as a temporary measure during development or testing; Answer 3 demonstrates manually editing the index.html to change the <base href> tag, e.g., from <base href=""> to <base href="http://subdomain.domain.com/subdirectory/">, but build-time configuration is preferred. On the server side, ensure that nginx or other web servers correctly handle subdirectory routing, as shown below:

location /issuertcoetools {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /issuertcoetools/index.html =404;
}

This configuration aligns with Angular's base-href setting, ensuring requests are properly redirected to files in the subdirectory.

Code Examples and Implementation Steps

During implementation, developers should first inspect the application deployment environment. Here is a simplified step-by-step guide: 1. Confirm the target application path, such as /issuertcoetools; 2. Integrate the --base-href parameter into the Angular project's build command, e.g., add RUN ng build --prod --base-href /issuertcoetools in the Dockerfile; 3. Verify that the generated index.html in the dist folder has the updated <base> tag; 4. Adjust the nginx or similar server configuration in the Kubernetes deployment to match the path settings. This helps eliminate MIME type errors at the source.

Conclusion and Best Practices

By correctly configuring the base path of Angular applications and server routing, developers can effectively avoid MIME type errors encountered in Kubernetes deployments. It is recommended to dynamically set --base-href during builds to adapt to different environments and combine it with cache management strategies for optimal performance. Regularly test deployment processes to ensure error-free resource loading, thereby enhancing application stability and user experience.