Why when returning a set of data using WebApi from a call Made by Angular the response object tries to return the whole page.

Question

Hi, I'm using Angular2 with MVC6 in VS2017. it is a .NetCore 1.1 application.

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';

import { ICountry } from '../interfaces/country';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';


@Injectable()
export class RecruiterService {
private _countriesUrl = 'http://localhost:42413/Recruiter/Home/Countries';

constructor(private http: Http) { }

public getCountries = (): Observable<ICountry[]> =>  {
    return this.http.get(this._countriesUrl)
        .map((response: Response) => <ICountry[]> response.json())
        .do(data => console.log('All: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

//public getCountries = (): Observable<{}> => {
//    return this.http.get(this._countriesUrl)
//        .map((response: Response) => <any[]>response.json())
//        .do(data => console.log('All: ' + JSON.stringify(data)))
//        .catch(this.handleError);
//}
 private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server error');
}
}

This is my Typescript Interface declaration

export interface ICountry {
CountryId: number;
CountryName: string;
ISOCode: number;
}

This is my MVC Controller

[Area("Recruiter")]
[Route("Recruiter")]
[Authorize(ActiveAuthenticationSchemes = "Cookie")]
[EnableCors("AllowSpecificOrigin")]
public class HomeController : LogControllerBase<HomeController>
{ .......
   [HttpGet("/Home/Countries")]
    public IActionResult GetCountries()
    {
        try
        {
            // return new JsonResult(new [] { new { CountryId = 1, CountryName = "Uk", ISOCode = 3 } });
            return Ok(_recruiterService.GetAllCountries());
        }
        catch (Exception ex)
        {
            Logger.LogError($"Error occured in Recruiter Home/GetCountries: {ex}");
            return BadRequest("Obtaining Countries");
        }

    }......

At the point of calling the countriesUrl in my Angular service, I always receive the following error, I also get the same error when I swap out to the commented code in both the angular and mvc method. I never reach my breakpoint in the MVC controller method. I've also attempted to set the _countriesURL to be fully qualified e.g. starting http, but I still receive the same error

SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at Response.Body.json (http.umd.js:777)
at MapSubscriber.http.get.map [as project] (recruiter.service.ts:20)
at MapSubscriber._next (map.ts:75)
at MapSubscriber.Subscriber.next (Subscriber.ts:95)
at XMLHttpRequest.onLoad (http.umd.js:1180)
at ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.umd.js:3971)
at ZoneDelegate.invokeTask (zone.js:397)
at Zone.runTask (zone.js:165)
at XMLHttpRequest.ZoneTask.invoke (zone.js:460)

In the Browser (Chrome) if I go to the network tab, I can see the call being made to the method even though it doesn't seem to breakpoint. In the headers for the call I get:

Request URL:http://localhost:42413/Recruiter/Home/Countries
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:42413
Referrer Policy:no-referrer-when-downgrade

Answer 1

Hi friend,

This forum is talking about issues of Visual Studio IDE, as your issue is related to Web developing, and there is another forum just for it:

https://forums.asp.net/

Thanks for your understanding.

Best regards,

Fletch

---

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact [e-mail].