Angular 6 Routing Ignore API calls from routing

Question

I have Angular 6 app and WebAPI. I have Deployed Angular app on IIS and beneath the Angular application I have created Application for API.

Something likes this

IIS 
  |
  |-Angular6App(port:443)
       |
       |-ServiceAPI

The Idea behind this is to use same DNS. So when https://Angular6App.com is called it should load angular app. If https://Angular6App.com/ServiceApi/api/cntlr/id is called it should get data(meaning call api service).

So now when I call https://Angular6App.com/ServiceApi/api/cntlr/id it is loading default route from angular app. Actually I want to skip angular routing when api is called.

Routing in Angular App

[
  { path: '', redirectTo: 'A', pathMatch: 'full' },
  { path: 'A', component: AComponent, canActivate: [AuthGuard] },
  { path: 'B', component: BComponent, canActivate: [AuthGuard] },
]

Please let me know if I can do this way and how?

Thanks --cc

Answer 1

I got this working. ON IIS, Use URL rewrite to ignore the pattern of serviceapi.

Set a URL rewrite on the main application(top-level i.e.., Angular6App) to ignore any URL which matches */ServiceAPI

Screenshot of URL rewrite setting

Hope this helps someone out there.