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


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

39737134-7dda-4fa8-aeb8-ee289f6c6fd8-min.png

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
0
: 527 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





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 

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

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


profileImage Answered by:- Aileereal

@vikas_jk

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

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

<!--<system.webServer>
<rewrite>
<rules>
<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" />
</conditions>
<action type="Rewrite" url="/" />--><!--Base href in index.cshtml--><!--
</rule>
</rules>
</rewrite>
</system.webServer>-->

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

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. 

1
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
Or
Register directly by posting answer/details

Full Name *

Email *




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