Making Http Call to Asp.Net Web Api from Angular 10

Question

I Have asp.net web api project tageting 4.5.2 and an angular 10 web app

i'm trying to make a get call from angular to my api

conversion.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConversionService {

  constructor(private http: HttpClient) { }

  getLayers () : Observable<string[]>
  {
    let uri = "http://localhost:44324/api/snapshots/getLayersFromShape";
    return this.http.get<string[]>(uri);
  }
}

mainpage.component.ts

import { Component, OnInit } from '@angular/core';
import { ConversionService } from '../service/conversion.service';

@Component({
  selector: 'app-mainpage',
  templateUrl: './mainpage.component.html',
  styleUrls: ['./mainpage.component.css']
})
export class MainpageComponent implements OnInit {
  filePath = 'C:\\Users\\MahammadM\\Downloads\\VS Shape files\\AREA2_OBSTACLES - EDITED';
  layers: string[];

  constructor(private conversionService : ConversionService) {

  }

  getLayers() {
    this.conversionService.getLayers()
    .subscribe(data => this.layers = data);
  }

  ngOnInit(): void {
  }

}

mainpage.component.html

<button (click)="getLayers()">Click me!</button>

WebApiConfig.cs

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            var cors = new EnableCorsAttribute("https://localhost:4200", "*", "*");
            config.EnableCors(cors);

            var jsonFormatter = config.Formatters.JsonFormatter;
            jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
            config.Formatters.Remove(config.Formatters.XmlFormatter);
            jsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Utc;
        }
    }

SnapshotsController.cs

[RoutePrefix("api/snapshots")]
    public class SnapshotsController : ApiController
    {
        private readonly IVerticalStructureValidationService _validationService;
        private readonly IConversionService _conversionService;
        private readonly IShapeFile _shapeService;
        public SnapshotsController(IConversionService conversionService, IVerticalStructureValidationService validationService, IShapeFile shapeService)
        {
            _validationService = validationService;
            _conversionService = conversionService;
            _shapeService = shapeService;
        }

        [HttpGet]
        [Route("getLayersFromShape")]
        public IHttpActionResult GetLayersFromShape(string filePath)
        {
            if (string.IsNullOrEmpty(filePath))
                return Ok(new string[] { "no path provided" });

            var layersAndShapePath = _shapeService.GetFileLayers(filePath);
            return Ok(layersAndShapePath);
        }
    }

in this "getLayersFromShape" method I Have break point, but when i click my button on ui, nothing happens. console is empty. what could be the issue? i'm new to angular, any help is highly appreciated. thanks