title: angular app seems to be redirecting any .net core api requests to site root
body: <p>I've created a blank .NET Core 2.1 web api project and in there I added an Angular (version 6) client side app - so all in the same project. All works fine in development and the app works 'sort of' when published. However, my problem is when I've published to IIS it 'seems' that Angular is catching or redirecting all/any request that should be going to the .NET Core api and is just sending them back to the root of the application. If I try and access any API url's then I just get forwarded/redirected to the home page.</p>
  
  <p>So my client app is accessible on the root of the site e.g. <a href="http://server/myapp/" rel="nofollow noreferrer">http://server/myapp/</a></p>
  
  <p>And my .NET api is all under the same site but under the 'api' folder, e.g. <a href="http://server/myapp/api/" rel="nofollow noreferrer">http://server/myapp/api/</a></p>
  
  <p>So for example if I enter <a href="http://server/myapp/api/example/test" rel="nofollow noreferrer">http://server/myapp/api/example/test</a> where 'test' is a valid action that returns some JSON and works fine in development, the browser console log gives an error as follows:-</p>
  
  <blockquote>
    <p>'Error: Cannot match any routes. URL Segment: 'api/example/test'</p>
  </blockquote>
  
  <p>Note that I've <strong><em>not</em></strong> used the Microsoft Angular template, this was in part for my own educational purposes and also I wanted to use Angular 6 (the current template is for Angular 5).</p>
  
  <p>I've configured my project and app so it's almost the same as the actual Microsoft Angular template and when I publish that the api calls work fine. I'm stuggling to see differences between my code and the template code and I've come to a wall now that I cannot seem to find any option or solution (but which frustratingly seem to not be a problem with another project with almost identical code!?!).</p>
  
  <p>Help!</p>
  
  <p>For reference here's my app.module.ts:-</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      HomeComponent    
    ],  
    imports: [
      BrowserModule,    
      HttpClientModule,
      RouterModule.forRoot([
        {
          path: '',
          component: HomeComponent,
          pathMatch: 'full'
        },
        {
          path: 'home',
          component: HomeComponent
        }
      ])
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>And my 'Example' controller which part of I've just stolen from the Microsoft Angular template:-</p>
  
  <pre><code>[Route("api/[controller]")]
  public class ExampleController : Controller
  {        
      private static string[] Summaries = new[]
      {
          "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
      };
  
      [HttpGet("[action]")]
      public JsonResult Test()
      {
          return Json(Summaries);
      }
  }
  </code></pre>
  
  <p>I'm making the requests using the HttpClient from @angular/http/common on the client side, however even if I type the address in a browser URL bar directly it still redirects to the root of the app!?!</p>
  
  <p>I'm sure I'm missing something daft and/or obvious but I just can't see it...</p>