Angular Routing - Have to use index.html first for route to work

Question

I am new to Angular and have deployed the app on IIS 10 outside of the wwwroot folder. IIS has URL Rewrite installed and this is the contents of the web.config file I am using.

<?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>

In the index.html file I have <base href="/">

When I build the app this is the command I use:

ng build --base-href "/myapp" --prod

When I browse to the website https://servername/index.html the page loads and the URL becomes https://servername/myapp/.

If I try to directly go to https://servername/myapp/ I get a server 500 error UNLESS I use https://servername/index.html first.

My end goal is to be able to use https://servername/myapp/?param1=123&param2=321 However this only works if I visit https://servername/index.html first.

Answer 1

Turned out to be a permission issue. I added the following code to my web.config file and it told me exactly what I needed to do to fix the issue.

<system.web> <customErrors mode="Off"/> </system.web>