Base solution for your next web application
Open Closed

URL rewrite not working on Azure App Service #6978


User avatar
0
ngis created

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,


1 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team

    What is your product version?