Step by step guide to fix Angular app refresh issue in IIS

If you deploy your Angular app in IIS, routing will be handled from the client. So when you refresh a page it will give you 404 error.

To get ride of the above-mentioned situation we have to follow the steps as follows:

Before deploying anything on IIS, you have to install the URL Rewriting module on the IIS server. Please refer the link.

After the installation, you should be seeing the following icon.

If you are above to deploy an Angular app when is developed with ASP.Net Core. That deployment steps are explained in my previous blog post. That blog spot explains one issue I came across when I was deploying Angular 7 App with ASP.Net Core in IIS.

So now we are done with IIS side installation next, we have to check the deployment files. You have to make sure that web.config file.

web.config should contain the followings:

 <?xml version=”1.0" encoding=”UTF-8"?>  
 <configuration>  
 <system.webServer>  
 <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” />  
 </conditions>  
 <!--<action type=”Rewrite” url=”/my-app/” /> -->  
 <action type=”Rewrite” url=”/” />  
 </rule>  
 </rules>  
 </rewrite>  
 </system.webServer>  
 </configuration>  

If deploying to a path beneath the root(c:\inetpub\wwwroot), build the angular application with a change in base-href option in index.html. (Example: ) Or if deploying to the root then base-href option in index.html will be as 

Hope this will help someone.