Достижение успешной публикации ()

Я создаю приложение Angular2 + с .NET RESTful API. Как только я нажимаю кнопку «Сохранить» после добавления элементов рецепта, я получаю сообщение об ошибке в консоли. Кажется, что Post () работает неправильно.

Компонент Add-Recipe (.html)

<h1>Add a Recipe</h1>
<form class = "form-inline">
    <label class = "sr-only" for = "recipeTitle">Recipes</label>
    <div class = "input-group mb-2 mr-sm-2">
      <input type = "text" class = "form-control" id = "recipeTitle" name = "recipeTitle" placeholder = "Recipe Title" [(ngModel)] = "title">
    </div>

    <label class = "sr-only" for = "count">Ingredient</label>
    <input type = "number" class = "form-control mb-2 mr-sm-2" id = "count" name = "count" placeholder = "Count" [(ngModel)] = "count">

    <label class = "sr-only" for = "ingredient">Recipes</label>
    <div class = "input-group mb-2 mr-sm-2">
      <input type = "text" class = "form-control" id = "ingredient" name = "ingredient" placeholder = "Ingredient" [(ngModel)] = "ingredient">
    </div>
    <p>the count: {{ itemCount }}</p>

    <input type = "submit" class = "btn btn-primary mb-2" value = "Add" (click) = "addIngredient()">
  </form>
  <h2>My Ingredients</h2>
    <ul class = "list-group">
      <li class = "list-group-item" *ngFor = "let ingredient of ingredientsArray">
          <span class = "badge">{{ ingredient.count }}</span> {{ ingredient.ingredient }}

      </li>
    </ul>

<button type = "button" class = "btn btn-primary" (click) = "saveRecipe()">Save</button>
<button type = "button" class = "btn btn-danger">Cancel</button>

Добавить код рецепта позади

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


@Component({
  selector: 'app-add-recipe',
  templateUrl: './add-recipe.component.html',
  styleUrls: ['./add-recipe.component.css']
})
export class AddRecipeComponent implements OnInit {
  itemCount: number;
  count: number;
  ingredient: string = '';
  title: string = '';
  ingredientsArray = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.itemCount = this.ingredientsArray.length;
  }

  addIngredient() {
    this.ingredientsArray.push({ count: this.count, ingredient: this.ingredient });
    this.ingredient = '';
    this.itemCount = this.ingredientsArray.length;
    this.count = null;
  }

  saveRecipe() {
    this.http.post('api/recipes', 
      { title: this.title, ingredients: this.ingredientsArray, itemCount: this.itemCount })
      .subscribe((res: Response) => {
        console.info('should be saved');

      });
  }
}

Контроллер

[HttpPost]
        public IActionResult Post(string title, List<IngredientsController> ingredients)
        {
            return Ok();
        }

Кажется, что все настроено так, как должно быть, но я получаю огромную ошибку в консоли, как будто она не достигает. Сообщение об ошибке говорит

message: "Http failure response for https://localhost:5001/api/recipes: 404 Not Found"

ингредиенты.

export class Ingredient {
    count: number;
    ingredient: string;
  }

Разве мне не нужно создавать страницу? Мне нужно создать какой-то компонент, который направляет на этот URL-адрес?