title: calling .net core method from angular gives error: failed to load resource: the server responded with a status of 404 ()
body: <p>I am very new to both angular and .net core. I am writing a sample project,
   In this project, I am calling a method from angular to .net core. I keep 
   getting an error saying:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 404 ()     api/AllItProjectsLists/index:1
  </code></pre>
  
  <p>I have a breakpoints on angular side  on method getProjectDetails(). nothing happens when I click on 
   F11 on this line </p>
  
  <pre><code>return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/Index').pipe(map(
  </code></pre>
  
  <p>Below is my full angular side code:</p>
  
  <pre><code>import { Injectable, Inject } from '@angular/core';
  import { HttpClient, HttpInterceptor } from '@angular/common/http';
  import { map } from 'rxjs/operators';
  import { AllItProject } from '../../models/allitproject';
  @Injectable({
    providedIn: 'root'
  })
  export class ProjectDetailService {
  
    myAppUrl = '';
    constructor(private _http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
      this.myAppUrl = baseUrl;
    }
    getProjectDetails() {
      return this._http.get(this.myAppUrl + 'api/AllItProjectsLists/Index').pipe(map(
        response =&gt; {
          return response;
        }));
    }
  </code></pre>
  
  <p>In my .net controller, I have defined AllItProjectsLists :</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Microsoft.AspNetCore.Http;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.EntityFrameworkCore;
  using ProjectDetails.Models;
  using ProjectDetails.Data;
  using ProjectDetails.Interfaces;
  namespace ProjectDetails.Controllers
     [Route("api/[controller]")]
      [ApiController]
      public class AllItProjectsListsController : ControllerBase
      {
          private readonly KPIContext _context;
          private readonly IProject objProject;
  
          public AllItProjectsListsController(IProject _objProject)
          {
              objProject = _objProject;
  
          }
  
          [HttpGet]
          [Route("api/AllItProjectsLists/Index")]
          public IEnumerable&lt;AllItProjectsList&gt; Index()
          {
              return objProject.GetAllProjectDetails();
          }
      }
  </code></pre>
  
  <p>this is what I have in my .net startup.cs file</p>
  
  <pre><code>  public void ConfigureServices(IServiceCollection services)
      {
  
          services.AddDbContext&lt;KPIContext&gt;(options =&gt; options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
          services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
          // In production, the Angular files will be served from this directory
          services.AddSpaStaticFiles(configuration =&gt;
          {
              configuration.RootPath = "ClientApp/dist";
          });
          services.AddCors();
      }
  </code></pre>
  
  <p>I keep getting loading... on my web browser</p>
  
  <p>Error from the console window:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 404 ()
  core.js:6014 ERROR HttpErrorResponseerror: "&lt;!DOCTYPE html&gt;↵&lt;html lang="en"&gt;↵&lt;head&gt;↵&lt;meta charset="utf-8"&gt;↵&lt;title&gt;Error&lt;/title&gt;↵&lt;/head&gt;↵&lt;body&gt;↵&lt;pre&gt;Cannot GET /api/AllItProjectsLists/Index&lt;/pre&gt;↵&lt;/body&gt;↵&lt;/html&gt;↵"headers: HttpHeaderslazyInit: () =&gt; {…}arguments: (...)caller: (...)length: 0name: ""__proto__: ƒ ()[[FunctionLocation]]: http.js:120[[Scopes]]: Scopes[4]lazyUpdate: nullnormalizedNames: Map(0) {}__proto__: Objectmessage: "Http failure response for https://localhost:44313/api/AllItProjectsLists/Index: 404 OK"name: "HttpErrorResponse"ok: falsestatus: 404statusText: "OK"url: "https://localhost:44313/api/AllItProjectsLists/Index"__proto__: HttpResponseBase
  defaultErrorLogger @ core.js:6014
  handleError @ core.js:6066
  next @ core.js:40557
  schedulerFn @ core.js:35335
  __tryOrUnsub @ Subscriber.js:185
  </code></pre>
  
  <p>I changed the code, the way you told me and I am getting status code 500 error:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 500 ()
  core.js:6014 ERROR HttpErrorResponseerror: "&lt;!DOCTYPE html&gt;
  ↵&lt;html lang="en" xmlns="http://www"headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure response for https://localhost:44313/api/AllItProjectsLists/Index: 500 OK"name: "HttpErrorResponse"ok: falsestatus: 500statusText: "OK"url: "https://localhost:44313/api/AllItProjectsLists/Index"__proto__: HttpResponseBase
  defaultErrorLogger @ core.js:6014
  handleError @ core.js:6066
  next @ core.js:40557
  schedulerFn @ core.js:35335
  __tryOrUnsub @ Subscriber.js:185
  </code></pre>
  
  <p>Below is my changed code:</p>
  
  <p>This is how I changed my code:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Microsoft.AspNetCore.Http;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.EntityFrameworkCore;
  using ProjectDetails.Models;
  using ProjectDetails.Data;
  using ProjectDetails.Interfaces;
  namespace ProjectDetails.Controllers
  {
      [Route("api/[controller]")]
      [ApiController]
      public class AllItProjectsListsController : ControllerBase
      {
          private readonly KPIContext _context;
          private readonly IProject objProject;
  
          public AllItProjectsListsController(IProject _objProject)
          {
              objProject = _objProject;
  
          }
  
  
          [HttpGet("Index")]
          public IEnumerable&lt;AllItProjectsList&gt; Index()
          {
              return objProject.GetAllProjectDetails();
          }
  
    }
  </code></pre>
  
  <p>My entire startup code:</p>
  
  <pre><code>using Microsoft.AspNetCore.Builder;
  using Microsoft.AspNetCore.Hosting;
  using Microsoft.AspNetCore.HttpsPolicy;
  using Microsoft.AspNetCore.Mvc;
  using Microsoft.AspNetCore.SpaServices.AngularCli;
  using Microsoft.Extensions.Configuration;
  using Microsoft.Extensions.DependencyInjection;
  using ProjectDetails.Models;
  using Microsoft.EntityFrameworkCore;
  namespace ProjectDetails
  {
      public class Startup
      {
          public Startup(IConfiguration configuration)
          {
              Configuration = configuration;
          }
  
          public IConfiguration Configuration { get; }
  
          // This method gets called by the runtime. Use this method to add services to the container.
          public void ConfigureServices(IServiceCollection services)
          {
  
              services.AddDbContext&lt;KPIContext&gt;(options =&gt; options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
              services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
              // In production, the Angular files will be served from this directory
              services.AddSpaStaticFiles(configuration =&gt;
              {
                  configuration.RootPath = "ClientApp/dist";
              });
              services.AddCors();
          }
  
          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IHostingEnvironment env)
          {
              if (env.IsDevelopment())
              {
                  app.UseDeveloperExceptionPage();
              }
              else
              {
                  app.UseExceptionHandler("/Error");
                  app.UseHsts();
              }
  
              app.UseHttpsRedirection();
              app.UseStaticFiles();
              app.UseSpaStaticFiles();
              app.UseCors(x =&gt; x.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
              app.UseMvc(routes =&gt;
              {
                  routes.MapRoute(
                      name: "default",
                      template: "{controller}/{action=Index}/{id?}");
              });
  
              app.UseSpa(spa =&gt;
              {
                  // To learn more about options for serving an Angular SPA from ASP.NET Core,
                  // see https://go.microsoft.com/fwlink/?linkid=864501
  
                  spa.Options.SourcePath = "ClientApp";
  
                  if (env.IsDevelopment())
                  {
                      spa.UseAngularCliServer(npmScript: "start");
                  }
              });
          }
      }
  }
  </code></pre>
  
  <p>My entire error:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 500 ()
  core.js:6014 
  RROR HttpErrorResponseerror: "&lt;!DOCTYPE html&gt;
  ↵&lt;html lang="en" xmlns="http://www"headers: HttpHeaderslazyInit: () =&gt; {…}arguments: (...)caller: (...)length: 0name: ""__proto__: ƒ ()[[FunctionLocation]]: http.js:120[[Scopes]]: Scopes[4]lazyUpdate: nullnormalizedNames: Map(0)size: (...)__proto__: Mapclear: ƒ clear()constructor: ƒ Map()delete: ƒ delete()entries: ƒ entries()forEach: ƒ forEach()get: ƒ ()has: ƒ has()keys: ƒ keys()set: ƒ ()size: (...)values: ƒ values()Symbol(Symbol.iterator): ƒ entries()Symbol(Symbol.toStringTag): "Map"get size: ƒ size()__proto__: Object[[Entries]]: Array(0)length: 0__proto__: Objectappend: ƒ append(name, value)applyUpdate: applyUpdate(update) {         /** @type {?} */         const key = update.name.toLowerCase();         switch (update.op) {             case 'a':             case 's':                 /** @type {?} */                 let value = (/** @type {?} */ (update.value));                 if (typeof value === 'string') {                     value = [value];                 }                 if (value.length === 0) {                     return;                 }                 this.maybeSetNormalizedName(update.name, key);                 /** @type {?} */                 const base = (update.op === 'a' ? this.headers.get(key) : undefined) || [];                 base.push(...value);                 this.headers.set(key, base);                 break;             case 'd':                 /** @type {?} */                 const toDelete = (/** @type {?} */ (update.value));                 if (!toDelete) {                     this.headers.delete(key);                     this.normalizedNames.delete(key);                 }                 else {                     /** @type {?} */                     let existing = this.headers.get(key);                     if (!existing) {                         return;                     }                     existing = existing.filter((/**                      * @param {?} value                      * @return {?}                      */                     value =&gt; {…}clone: ƒ clone(update)constructor: class HttpHeaderscopyFrom: copyFrom(other) {         other.init();         Array.from(other.headers.keys()).forEach((/**          * @param {?} key          * @return {?}          */         key =&gt; {…}delete: ƒ delete(name, value)forEach: forEach(fn) {         this.init();         Array.from(this.normalizedNames.keys())             .forEach((/**          * @param {?} key          * @return {?}          */         key =&gt; {…}get: ƒ get(name)getAll: ƒ getAll(name)has: ƒ has(name)init: init() {         if (!!this.lazyInit) {             if (this.lazyInit instanceof HttpHeaders) {                 this.copyFrom(this.lazyInit);             }             else {                 this.lazyInit();             }             this.lazyInit = null;             if (!!this.lazyUpdate) {                 this.lazyUpdate.forEach((/**                  * @param {?} update                  * @return {?}                  */                 update =&gt; {…}keys: ƒ keys()maybeSetNormalizedName: ƒ maybeSetNormalizedName(name, lcName)set: ƒ set(name, value)__proto__: Objectmessage: "Http failure response for https://localhost:44313/api/AllItProjectsLists/Index: 500 OK"name: "HttpErrorResponse"ok: falsestatus: 500statusText: "OK"url: "https://localhost:44313/api/AllItProjectsLists/Index"__proto__: HttpResponseBase
  </code></pre>
  
  <p>any help will be highly appreciated.</p>