Cannot open angular app hosted in azure by path product details

Question

I have an Angular application hosted in Azure. Users want to open the app by pasting a specific URL to the browser (https://somehosting.com/myapp/product/detail/123) but it can’t be opened that way it redirects to https://somehosting.com not even https://somehosting.com/myapp.

If I paste in a browser https://somehosting.com/myapp it can be opened but if I paste the full URL with the product ID it can’t be opened. Has anyone encountered such a problem? Any help would be appreciated

Answer 1

In the past I run into similar issue. If you are using Azure web apps, I would use a web.config file. This solved my issue last time. Add this web.config file to the root of your application. This sets the rewriting rules for IIS to '/'.

That config should looks like this

<?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="/nameOfApp/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

That url should be reflected by href inside your index.html.Make sure that the tag in your index.html is set correctly. Or if your application is hosted under /myapp, then you should set it to . This ensures that Angular's router knows the correct base path for all its routes.

Answer 2

Try to create the following web.config file on the root level of your angular application, like the one below.

<?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="./index.html" />
      </rule>
    </rules>
  </rewrite>
  </system.webServer>
</configuration>

On some occasions, I had to configure the URL rewrite in Azure portal.

https://learn.microsoft.com/en-us/azure/application-gateway/rewrite-url-portal