Deployed Angular Application in Azure but on refresh getting URL Rewrite Module Error

Question

We have the angular application deployed in azure, but on refresh application is breaking and we are getting an error, that is saying "The page cannot be displayed because an internal server error has occurred."

Here is the web.config file present in my angular application

<?xml version="1.0"?>
<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <rule name="Angular Routing" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile"
                     negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory"
                     negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
            </rule>
        </rules>
    </rewrite>
  <httpProtocol>
    <customHeaders>
      <add name="X-Content-Type-Options" value="nosniff" />
    </customHeaders>
  </httpProtocol>
    <staticContent>
        <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
        <mimeMap fileExtension="json" mimeType="application/json" />
    </staticContent>
</system.webServer>
<system.web>
  <httpCookies httpOnlyCookies="true" requireSSL="true" />
</system.web>
</configuration>

Please help me on this.

Are you using VS Code or Visual Studio ? How you are deploying your Web App ? — Harshitha Veeramalla, Mar 29 '22 at 19:17
yes @HarshithaVeeramalla-MT , I'm using visual studio code for frontend development. I'm pushing my code to repo, thereafter using azure pipelines, we are triggering the deployment. — user18610186, Mar 29 '22 at 19:20

Harshitha Veeramalla · Answer 1 · 2022-04-04T06:20:32.203

The page cannot be displayed because an internal server error has occurred.

This problem occurs because the server cannot access the configured root directory of the requested location.
- Make sure that the server can access the configured root directory of the requested location.
Looks like there is another web.config that conflicts with your parent one in dist and amd.
The 500 error must locate the problematic web.config file if detailed errors is enabled. In web.config,

<configuration>
    <system.web>
        <customErrors mode="Off"/>
        <compilation debug="true"/>
    </system.web>
</configuration>

When the angular app was build using

ng build --prod

Two web.config files will be deployed. One is in the root folder, the other in the assets folder.

Check your angular.json file If you find anything like below

 "src/web.config"

Remove that line

Please refer Ref1 ,Ref2 and Ref3 for more information

Thank you @HarshithaVeeramalla-MT for your time, I checked there is only one web.config deployed in the azure, also I tried with few of the web.config files which you sent as references, but nothing works. Please let me know if there is anything I'm missing — user18610186, Apr 05 '22 at 13:47

Deployed Angular Application in Azure but on refresh getting URL Rewrite Module Error

1 Answers1