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

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

ApiService

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';

@Injectable()
export class CompanyService {
privatecompanyUrl='api/companies';
privateheaders:HttpHeaders;

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

getCompanies():Observable<ICompany[]> {
consturl=`${this.companyUrl}/GetCompanies`;
returnthis.http.get(url, { headers:this.headers })
.do(data => console.log('All: ' + JSON.stringify(data)))
}
}?

My Component that will consume my service

ngOnInit() {
this.getCompanies();
}

getCompanies():void {
this.companyService.getCompanies()
.subscribe(companies => {
this.companies=companies;
},
error=>this.errorMessage= <any>error
);
}?

ASP.NET Api Controller (VS2015)

[HttpGet]
[Route("api/Companies/GetCompanies")]
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

: 3205 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 https://sudiptach.wordpress.com/2017/08/09/angular4-crud-aspnetwebapi-ef-sqlserver/ 0

By : vikas_jk - at :- 2/26/2018 1:35:54 PM

Also, check this issue https://stackoverflow.com/questions/46756083/angular-4-how-to-get-data-from-asp-net-web-api 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

add comment to question

2 Answers

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

http://www.encodedna.com/angular/httpclient-service-in-angular-4-with-web-api-in-aspdotnet-mvc-4.htm

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

comment to above answer

Answered by:- Aileereal

@vikas_jk

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

-------------------

-------------------

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

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