Angular service NOT hiting Asp.Net MVC Post Controller

Question

I have this method in my angular service I want it to hit a the controller in my asp.net CORE api. But it does not hit my controller. I have tried to make the post in Postman and it works. I do not understand why my post in Angular does not work Thank you for your help.

  addFamily(family: Family) {

    this.http.post<Family>('https://localhost:44344/api/componentFamily', JSON.stringify(family))
  }

Here is my ASP.NET CORE API.

    // POST api/componentFamily
    [HttpPost]
    public async Task<IActionResult> Post([FromBody] ComponenFamilyViewModel componentFamilyViewModel)
    {
        Family family = new Family();
        family.FamilyId = componentFamilyViewModel.FamilyId;
        family.FamilyName = componentFamilyViewModel.FamilyName;

        await _componentFamilyService.AddFamily(family);

        return CreatedAtAction("Get", new { id = family.FamilyId }, family);
    }

@PritomSarkar I have services.AddCors(); and app.UseCors(x => x .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader()); In my startup.cs file — J.C
– J.C, Commented Aug 17, 2021 at 17:30

Antoniossss · Accepted Answer · 2021-08-17 17:37:17Z

1

Http client's observables are so called cold. In order for them to fire - and perform the web request - you have to subscribe to it, so

addFamily(family: Family) {

    return this.http.post<Family>('https://localhost:44344/api/componentFamily', JSON.stringify(family))
  }

and the caller

yourService.addFamily(famili).subscribe(result=>do whatever with the result)

answered Aug 17, 2021 at 17:37

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicola Biada · Accepted Answer · 2021-08-17 17:33:34Z

1

Try to send the object without stringify if you use [FromBody]:

    this.http.post<Family>('https://localhost:44344/api/componentFamily', family)

answered Aug 17, 2021 at 17:33

Nicola Biada

2,8481 gold badge11 silver badges24 bronze badges

1 Comment

J.C Over a year ago

It did not fix my problem, but you are right I do not need to and the JSON.stringify(family) in this case thank you for your help.

Some random IT boy · Accepted Answer · 2021-08-17 17:36:56Z

0

Angular's HTTP client uses RxJS if you don't:

Call .subscribe() (or with a callback)
Call toPromise().then(val => {...})
Use the async pipe from a template like so: <div *ngIf="response$ | async">

...the side-effect (network call) will not be performed.

Try the following:

@Component({...})
export class YourComponent {

  constructor(private http: HttpClient) {}

  public async onAddFamily(family: Family) {
     const response$ = this.http.post<Family>('https://localhost:44344/api/componentFamily', JSON.stringify(family))
     await response$.toPromise()
  }

answered Aug 17, 2021 at 17:36

Some random IT boy

8,5553 gold badges29 silver badges63 bronze badges

Collectives™ on Stack Overflow

Angular service NOT hiting Asp.Net MVC Post Controller

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related