Calling ASP.NET WEB API with Angular 4 HttpClient is not working

My angular 4 doesn't hit my API in my controller



import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import { ICompany } from './ICompany';
import { HeaderService } from '/shared/header.service';

export class CompanyService {

constructor(privatehttp:HttpClient, privateheaderService:HeaderService) {
this.headers=newHttpHeaders({ 'Content-Type':'application/json' });

getCompanies():Observable<ICompany[]> {
returnthis.http.get(url, { headers:this.headers })
.do(data => console.log('All: ' + JSON.stringify(data)))

My Component that will consume my service

ngOnInit() {

getCompanies():void {
.subscribe(companies => {
error=>this.errorMessage= <any>error
ASP.NET Api Controller (VS2015)
public IEnumerable<Company> GetCompanies()
List<Company> companies = new List<Company>();
for (int x = 1; x < 5; x++)
companies.Add(new Company
Id = x,
Name = "Company " + x,
Address = "Address " + x,
ContactInfo = "ContactInfo " + x,
TinNumber = "Tin Number " + x
return companies;
It hits the API controller but it doesn't go in the breakpoint.

Asked by:- Aileereal
: 3164 At:- 2/26/2018 12:50:12 PM
Angular 4 HttpClientModule ASP.NET VS2015

I don't have much knowledge in Angular But can you let me know the reference URL which you are using for this guide? Here is the good article which you may refer 0
By : vikas_jk - at :- 2/26/2018 1:35:54 PM
Also, check this issue 0
By : vikas_jk - at :- 2/26/2018 1:43:04 PM
its from pluralsight deborah kurata. since i used the httpclientmodule. i can't hit the breakpoint from my web api. but the request is entertained. as you can see in application insights. there are two requests, but it doesnt continue on the breakpoint part. 0
By : Aileereal - at :- 2/26/2018 1:45:20 PM

2 Answers
profileImage Answered by:- vikas_jk

I tried to Call Web API using Angular 4 and httpclient module and I was able to call it, here is the image of debug output

api-Call-from-angular-min (1).png

Here is the article which I referred

If your issue is still there, you can upload your Angular project on GitHub or on google drive and paste the link so I can download it and test locally, thanks

At:- 2/27/2018 10:42:58 AM

profileImage Answered by:- Aileereal


I fixed the problem by removing these lines of code on my webconfig.


<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<action type="Rewrite" url="/" />--><!--Base href in index.cshtml--><!--


I added these codes to refresh my website . It came from

Now, my problem on my refresh comes back. I guess I need to research again for other alternative.  I also tried the link you provided, but I believe the the line of codes that i uncommented is the real problem. 

Thank you Mr. Vikas. 

At:- 2/27/2018 12:33:27 PM Updated at:- 2/27/2018 12:36:54 PM
Great, Thanks for letting me know 0
By : vikas_jk - at :- 2/27/2018 1:04:51 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use