angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
<p>I have an Angular 2 rc-2 app with basic routing implemented.The paths are <code>/path1</code> which is the default path and <code>/path2</code>.The home path <code>/</code> redirects to <code>/path1</code>. When I run it locally (lite-server) everything works fine. I managed to deploy this app to an Azure web app. The app works OK BUT if I refresh the page when I m in <code>/path1</code> or <code>/path2</code> I get this error : <code>The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.</code> </p>

<p>A possible approach is to implement url rewrite. I added a web.config file in my  project</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;

&lt;configuration&gt;
    &lt;system.webServer&gt;
        &lt;rewrite&gt;
        &lt;rules&gt;
        &lt;clear /&gt;

         &lt;!-- check if its path1 url and navigate to default page --&gt;
        &lt;rule name="Path1 Request" enabled="true" stopProcessing="true"&gt;
        &lt;match url="^path1" /&gt;
        &lt;action type="Redirect" url="/index.html" logRewrittenUrl="true" /&gt;
        &lt;/rule&gt;

         &lt;!-- check if its path2 url and navigate to default page --&gt;
        &lt;rule name="Path2 Request" enabled="true" stopProcessing="true"&gt;
        &lt;match url="^path2" /&gt;
        &lt;action type="Redirect" url="/index.html" logRewrittenUrl="true" /&gt;
        &lt;/rule&gt;

         &lt;/rules&gt;
        &lt;/rewrite&gt;
    &lt;/system.webServer&gt;
&lt;/configuration&gt;
</code></pre>

<p>In this case I can make a refresh without getting this error message.But any refresh redirects me to the default url. I refresh from <code>/path2</code> and it redirects me to <code>/path1</code> (default url).</p>

<p>Any thoughts to improve refresh ? :)</p>