I am using angular and Azure classic CDN to host the pages with custom domain configuration.
I am using ng new angular-tour-of-heroes from Create a new workspace and an initial application to create a new angular project.
In this angular.json file, I have the default build configurations.
"outputPath": "dist/angular-tour-of-heroes",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": ["zone.js"]
The package.json file has the default.
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"dependencies": {
"@angular/animations": "^15.0.0",
"@angular/common": "^15.0.0",
"@angular/compiler": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/forms": "^15.0.0",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0",
"@angular/router": "^15.0.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
}
Finally, I am using the following command to build my production.
ng build --configuration production
I am copying the whole content of the dist/angular-tour-of-heroes folder the $web folder in the Azure storage.
So the contents of the $web folder are
index.html main..js polyfills..js runtime..js styles..css favicon.ico 3rdpartylicense.txt
and the index.html file is
<!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>
</body></html>
When moving the files to $web folder in the Azure storage, I get a white screen with the following errors in the console.
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.
On the other side, If I replace the index.html with a very basic HTML page and upload it to $web folder in the Azure storage. The site works as expected.
<html>
<head>
<title>Test</title>
</head>
<bod>
<h1>Something here</h1>
</bod>
</html>
I have tried many links to find a solution, but yet to make any success. Failed to load module script Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"
CDN configuration
Modify response header Overwrite X-Content-Type-Options nosniff
Modify response header Overwrite Content-Security-Policy default-src 'self'; frame-src 'self';
Modify response header Append Content-Security-Policy script-src 'self'; style-src 'self'
Is there any way to configure CDN to allow js files?
Additionally, If I use the direct link from the Azure storage->Static Website, the website is loading correctly. (e.g) https://something.z13.web.core.windows.net/