Ignore route in Angular 9?

Question

I'm trying to let my Angular code call APIs.

It looks to me like the Angular code 'catches' my calls to the API. How can I instruct the Angular app to 'pass on' the requests to web applications in IIS?

I deploy the Angular app to a web site at the root, say www.dummy.com. I have an identity server running as web application at www.dummy.com/IDP and the single API to call at www.dummy.com/API.

If the relative route starts with IDP or API, I want the respective web applications to handle them.

How can I do that?

I've tried to wrap my head around URL Rewrite and ARR on IIS, but would prefer a solution in code.

const routes: Routes = [
{path: '', redirectTo: 'travel-expenses', pathMatch: 'full'},
{path: 'fetch-data', component: FetchDataComponent},
{path: 'sign-in', component: SignInComponent},
{path: 'signin-redirect-callback', component: SigninRedirectCallbackComponent},
{path: 'signout-redirect-callback', component: SignoutRedirectCallbackComponent},
{path: 'unauthorized', component: UnauthorizedComponent},
{
    path: 'travel-expenses',
    loadChildren: () => import('./modules/travel-expenses/travel-expenses.module').then(m => m.TravelExpensesModule),
    canActivate: [UserSignedInGuard]
},
{path: '404', component: PageNotFoundComponent},
{path: '**', redirectTo: '/404'}

];

Answer 1

What you're looking for is the angular proxy-config option. This lets you reroute api calls as needed, and call it during run or build, e.g. ng serve --proxy-config proxy.conf.json

example config file (proxy.conf.json):

{
    "/api": {
        "target": "https://the-api-server.com",
        "secure": false,
        "pathRewrite": {"^/api" : ""},
        "changeOrigin": true
    }
}