title: Angular4+ router redirects to home page in IIS
body: <p>I've been learning Angular 4+ since few weeks.</p>
  
  <p>I created a web application that works just fine in dev mode, but when I first tried to deploy the application in IIS, I got stuck because of the well known </p>
  
  <blockquote>
    <p>404 page not found</p>
  </blockquote>
  
  <p>error when typing an address directly from the browser's address bar.</p>
  
  <p>I applied the solution described in various threads as <a href="https://stackoverflow.com/questions/38209656/get-angular2-routing-working-on-iis-7-5">this one.</a></p>
  
  <p>My application's base href is "/ePortal/" and my main app routes are defined as follow:</p>
  
  <pre><code>export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
     { path: 'logout', component: LogoutComponent },
     { path: '', redirectTo: '/publicarea', pathMatch: 'full' },
     { path: '**', component: PageNotFoundComponent }
  ];
  </code></pre>
  
  <p>I then have a child route defined as:</p>
  
  <pre><code>const publicAreaRoutes: Routes = [{
     path: 'publicarea',
     component: PublicAreaComponent,
     children:[
        { path: 'events', component: EventsComponent},
        { path: 'comunicazioni', component: ComunicazioniComponent},
     ]
  }];
  </code></pre>
  
  <p>The problem is that if I try to navigate using the address bar to:</p>
  
  <blockquote>
    <p><a href="http://localhost/ePortal/publicarea/events" rel="nofollow noreferrer">http://localhost/ePortal/publicarea/events</a></p>
  </blockquote>
  
  <p>I keep getting redirect to </p>
  
  <blockquote>
    <p><a href="http://localhost/ePortal/publicarea" rel="nofollow noreferrer">http://localhost/ePortal/publicarea</a></p>
  </blockquote>
  
  <p>As I said before, the application works just fine in dev, the problem is probably due to the combination of IIS rule rewrite I used to fix the 404 Page not found error from above and the Route redirecting to publicare when the path is ''</p>
  
  <pre><code>{ path: '', redirectTo: '/publicarea', pathMatch: 'full' },
  </code></pre>
  
  <p>This is the web.config file i'm using:</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;rule name="angularjs routes" stopProcessing="true"&gt;
                &lt;match url=".*" /&gt;
                &lt;conditions logicalGrouping="MatchAll"&gt;
                   &lt;add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /&gt;
                   &lt;add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /&gt;
                   &lt;add input="{REQUEST_URI}" pattern="^/$" negate="true"/&gt;
                &lt;/conditions&gt;
                &lt;action type="Rewrite" url="/ePortal" /&gt;
             &lt;/rule&gt;
          &lt;/rules&gt;
       &lt;/rewrite&gt;
    &lt;/system.webServer&gt;
  &lt;/configuration&gt;
  </code></pre>
  
  <p>Any suggestion on how to fix this? Am i missing something?
  Many thanks</p>