Call local.net core Web API from Angular

Question

I have two projects in a solutiion. Rather than creating a Single application using Angular template, I created two projects. One is Angular and one is Web API. SO what I did was in angular.json file I specified output path like this

"outputPath": "../../Cr_API/wwwroot",

So Whenever I build angular application it creates output files in my other API project's wwwroot folder. So in launchsettings.json file the api project I set the launchurl as

"launchUrl": "index.html",

So when the Web API application execute my Angular application loads as expected. But my question is about the API paths when calling. When executing the angular app separately my API calls like this

let url:string="https://localhost:44331"; 

return this.client.get(url+'/api/Locations', {
  withCredentials: true,
  responseType: 'json'
});

But since when building and running from API app itself, it doesnt need the full path since the call is local to that application. So how can I deal with it the best way. Somthing like Baseurl method is Angular template.

Bojan Kogoj · Accepted Answer · 2020-05-20 08:53:08Z

I think interceptor would help you here. Instead of adding URL to each API call it could do it automatically.

@Injectable()
export class ApiUrlInterceptor implements HttpInterceptor {

  public intercept(
    request: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    const req = request.clone({
      url: environment.apiUrl + request.url,
      withCredentials: true, // Moved withCredentials here as well
    });
    return next.handle(req);
  }
}

This means you have environment.ts

export const environment = {
  ...
  apiUrl = 'https://localhost:44331';
};

and environment.prod.ts

export const environment = {
  ...
  apiUrl = ''; // so it uses relative path to API
};

This way your API call could look like

return this.client.get<any[]>('/api/Locations');

This way you not solved API URL in one location, but withCredentials as well.

Collectives™ on Stack Overflow

Call local.net core Web API from Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related