Open Closed

URL rewrite not working on Azure App Service #6978

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"?>
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" /> 
    <!-- IIS URL Rewrite for Angular routes -->
        <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" />
          <action type="Rewrite" url="/" />

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; 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! 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)
  • 0
    maliming created

    What is your product version?