I am new to Angular deployments. So today I tried deploying an angular app to local IIS. In one scenario, I was able to see the UI. Scenario 1: Initial route should be navigated to “sample” and SampleComponent is being displayed

const routes: Routes = [
  { path: '',  component: SampleComponent},
  { path: 'sample', component: SampleComponent},
  { path : 'dashboard',  component: BillingDashboardComponent, children : [
    { path: '', pathMatch: 'full', redirectTo: 'billing-manager' },
    { path: 'billing-manager', component: BillingDashboardSummaryComponent },
  ]},

Scenario 2: But when I changed my route to be redirected to “dashboard” which in turn is redirected to ‘billing-summary’. I am seeing a blank screen.

{ path: '', redirectTo: 'dashboard' , pathMatch: 'full'},
  { path: 'sample', component: SampleComponent},
  { path : 'dashboard',  component: BillingDashboardComponent, children : [
    { path: '', pathMatch: 'full', redirectTo: 'billing-manager' },
    { path: 'billing-runs', component: BillingDashboardSummaryComponent },
  ]},

Below is the issue, Can you please help on the issue and explain me what’s causing the issue

Edited I even added a web.Config file with the below reWrite configs

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/billing-manager-dashboard" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This time, 404 error is displayed. Don't know what I'm missing

Can anyone please help me on this. Thanks in advance