Browser refresh doesn't work on any of the URLs in angular

I have worked on this issue and I have found the solution:

Angular supports two Location Strategies:

1. HashLocationStrategy (e.g  http://localhost:4200/#/product)
2. PathLocationStrategy (e.g http://localhost:4200/product)

Right now we are using PathLoaction Strategy and this is totally based on server side routing. In this strategy, Hosting server must support for HTML5 based routing.

Ref Url: https://www.tektutorialshub.com/location-strategies-angular

In our case, when we click on refresh button or type URL http://localhost:4200/product, The browser will send the request to the web server. Since the page “product” does not exist, it will return the 404 error.

This problem could be solved, if we are able to redirect all the request to the index.html

For testing purpose, I have deployed our application into our local IIS server and rewrite a rule in IIS server web config file and this problem has been fixed.

I have wrote following code for rewriting(Ref: https://stackoverflow.com/questions/35052663/routing-and-navigation-in-angular-2):

<?xml version="1.0" encoding="utf-8"?>

<configuration>

    <system.webServer> 

        <rewrite>

            <rules>

                <rule name="redirect all" stopProcessing="true">

                    <match url="^(.*)$" ignoreCase="false" />

                    <conditions logicalGrouping="MatchAll">

                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />

                    </conditions>

                    <action type="Rewrite" url="index.HTML" appendQueryString="true" />

                </rule>

            </rules>

        </rewrite>

    </system.webServer>

</configuration>

Please check it and update config file on the server, This problem should be fixed.