Angular multi-lingual application - Mime type error in console with blank page while...

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). We have 2 web.config files in the dist folder.

1. 
   a file on the top level of the dist folder (dist/web.config) used httpRedirect to navigate to the default URL: https://example.com/de;
   
   
2. 
   web.config file inside each language build folder (dist/de and at the same level of index.html file) where it set's rewriting rule when the routing URL is unknown and is not a physical file, it should be handled by Angular, and index.html will be used as the default
   

​

We tried the following to solve MIME type error issue

1. web.config file rewriting rule updated inside each language folder (dist/de)

a) Added rewriting condition when the routing is not for a directory (add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true") b) DefaultDocument tag added, otherwise application routing was not working and I had to type manually index.html at the end of the URL (For example, https://example.com/en/public/home/index.html)
​

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

1. We have base href (<base href="/">) in the head of index.html file already.

Do you have any suggestions to solve this issue?

NOTE: I don't want to touch the Azure configuration to solve the issue. So, Angular changes only
​

Continue reading...