angularazure-storageazure-cdnazure-static-website-hosting

Azure static website with Azure CDN shows white screen only

I have hosted this angular website angular-tour-of-heroes in Azure storage. The storage link works as expected.

I configured a custom domain in Azure CDN to serve the Azure static website. The domain configuration works fine when you upload a simple index.html file. However, when you upload the angular project, it only shows a white screen. The angular project is built with the default configuration of the angular project. Additionally, if you serve it from the Azure CDN endpoint, it is not working and is the same as the custom domain.

ng build --configuration production

The content of the $web storage folder in the Azure storage is

  1. index.html
  2. favicon.ico
  3. main.*.js
  4. polyfills.*.js
  5. run.*.js
  6. styles.*.js

I realized in the F12 browser console that the Content-Type from Azure CDN is always text/html for all the files. However, the Content-Type when served from the Azure static website storage link is according to the $web folder content-type in the storage.

Content-Type in the Azure storage

Files with Content-Type in the Azure Storage

Content-Type in F12 browser console for Azure CDN configured F12 Console for Css file

F12 console for Js file

I also modified to Content-Security-Policy of the Azure CDN rule to allow inline-scripts/inline-styles, but doesn't seem to work.

Additionally, the console error is

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.

Content of index.html page

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>AngularTourOfHeroes</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="styles.ef46db3751d8e999.css">
</head>

<body>
  <app-root></app-root>
  <script src="runtime.6e50dac17b84e715.js" type="module"></script>
  <script src="polyfills.716cc9a230a87077.js" type="module"></script>
  <script src="main.93983fc3aa1a4437.js" type="module"></script>

  <!-- <script src="runtime.6e50dac17b84e715.js" type="application/javascript"></script>
  <script src="polyfills.716cc9a230a87077.js" type="application/javascript"></script>
  <script src="main.93983fc3aa1a4437.js" type="application/javascript"></script> -->

  <!-- <script src="runtime.6e50dac17b84e715.js" type="text/javascript"></script>
  <script src="polyfills.716cc9a230a87077.js" type="text/javascript"></script>
  <script src="main.93983fc3aa1a4437.js" type="text/javascript"></script> -->

  <!-- <script src="runtime.6e50dac17b84e715.js"></script>
  <script src="polyfills.716cc9a230a87077.js"></script>
  <script src="main.93983fc3aa1a4437.js"></script> -->

</body>

</html>

Error when changing the tag Error changing script tag

Are there any other configurations to be done in the Azure CDN to serve an Angular project or this is something related to Angular?

Solution

  • Finally, I found the issue with the Azure CDN. I implemented the following rule in the Azure CDN which somehow is causing the error. I followed this rule to allow SPA refresh or URL routing, however, it ended up creating another problem.

    SPA rule