Hello, I am trying to deploy the Angular application to an App Service in Azure. I have a web.config file in the /src/ folder of my angular app.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
<!-- IIS URL Rewrite for Angular routes -->
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
I build the application;
ng build --prod
I deploy the app to Azure and load the site in the browser. In the debug console i get a heap of these errors;
Refused to apply style from '<URL>' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
All of them relate to the CSS files in the /src/assets/ directory. If I try to get these files using Postman i get a 404. For example;
https://myapp.azurewebsites.net/assets/metronic/assets/demo/default/base/style.bundle.css returns a 404
I have confirmed that the file is there using Kudu and the Azure App Service extension in VSCode.
This file works fine however!
https://myapp.azurewebsites.net/assets/appconfig.production.json returns 200 and shows the JSON file.
Something is causing the CSS and PNG files to redirect to another url whilst not interfering with the JSON files. Surely the {IsFile} and {IsDirectory} match types would allow them through!
Please help,
