Angular CLI with MVC returning 404 from API call

Question

I'm working on a combined .Net Core 3.1, Angular 8 project.

The Angular code is embedded inside the Visual Studio project that contains the MVC code, under a ClientApp folder

I'm fine with .Net but Angular is new to me as of 2 days ago.

I'm trying to get the Angular code to call an MVC API

I've been following a number of videos and tutorials and I came up with this as a sort of proof of concept.

Angular Code

import { Component, OnInit } from "@angular/core";
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'people-list',
  templateUrl: "peopleListView.component.html"
})

export class PeopleListView implements OnInit {

  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    let test = "";
    test = "/api/Person/GetPeopleList";
    this.http.get(test).subscribe((data: any) => console.log(data), (err: any) => console.log(err));
  }

MVC code

[ApiController]
[Route("api/[controller]")]
public class PersonController : Controller
{
    public PersonController()
    {
    }

    [Route("api/[controller]/[action]")]
    [HttpGet]
    public List<Person> GetPeopleList()
    {
        List<Person> people = new List<Person>{
               new Person{Id = 1, Name = "Scott"},
               new Person{Id = 2, Name = "Bill"}
               };

        return people;
    }
}

I can see that the break point on the Angular code get hit so my Angular code before that is functioning but the GetPeopleList() method is not hit and I'm getting a 404 error.

I've tried a number of variation on the route e.g. [Route("api/[controller]]")] but to no avail.

Where have I gone wrong?

UPDATE Having seen that my code is requesting localhost:5001/api/Person/GetPeopleList I am wondering if the API is actually on port 5001 as that is controlled by the Angular app.

concatenate it website address http ://yoursite//api/Person/GetPeopleList for test variable also look into website developer tool that at what address it's requesting — rashfmnb
– rashfmnb, Commented Dec 7, 2021 at 15:39
I can see from the Console log that the requested URL is: localhost:5001/api/Person/GetPeopleList. So the website address is being automatically concatenated. — Richard210363
– Richard210363, Commented Dec 7, 2021 at 15:58
As far as I can tell from reading [] is the correct convention when using Token Replacement. I tried using {} instead and it did not work either. I have removed the tokens and used an explicit route [Route("api/test/GetPeopleList")] and [Route("api/test")]. They do not work either, I still get the 404. — Richard210363
– Richard210363, Commented Dec 7, 2021 at 16:30

Serge · Accepted Answer · 2021-12-07 17:51:31Z

1

you have to fix a route by adding "~/" to the start. It means that route starts from the route, your current route needs ".../api/person/api/person/getPeolelist" url

 [Route("~/api/Person/GetPeopeList")]
 public List<Person> GetPeopleList()

answered Dec 7, 2021 at 17:51

Serge

44.4k4 gold badges26 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Angular CLI with MVC returning 404 from API call

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