Problem with MIME type error when redirecting to angular (with i18n) route via azure...

We have a multi-lingual Angular (v17) application where, by default, during the user's first visit public home route is used (https://example.com/de/public/home). However, we also have a special campaign route (for example, https://example.com/de/public/sale), mostly having static content with some links. We have the following business case,

GOAL: When special campaign starts on our website, during the user's first visit, instead of taking to the public home page, we want to take the user to the special campaign route first. IMPORTANT: This routing rule is valid till the end of the sale campaign.


PROBLEM: When we manually type the route (https://example.com/de/public/sale) in the browser, it works fine. To achieve this automatic routing goal, we set a rule in Microsoft Azure App Service via Front Door. Currently, routing via Azure Front Door works fine, but we don't see any content of the page except a blank white page. We get the following MIME type errors in the browser console
​

MIME TYPE CONSOLE ERROR:

sale:1 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.

// No resource with given identifier found

sale:1 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.

sale:1 Refused to apply style from 'examples.com/en/public/helloworld' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

sale:1 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.

manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
​

NOTE: Our application is multi-lingual. It builds with separate folder for each language inside the dist folder (such as dist/de, dist/it)

1. Updated the route from Angular deep link (https://example.com/de/public/sale) to https://example.com/de/sale by assuming it is not getting index.html file as default. Similar MIME type error issue here as well

NOTE: We configured this new route (/sale) in Azure Front Door before deploying the updated route in Angular. Noticed that the page is having blank with MIME type error in the console as well. Ideally, it should navigate to the error page (/error404) when route is completely unknown

How could we solve this MIME type error issue in Angular?

Continue reading...