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


  • 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';
    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)))
    //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) {
        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
    [Authorize(ActiveAuthenticationSchemes = "Cookie")]
    public class HomeController : LogControllerBase<HomeController>
    { .......
        public IActionResult GetCountries()
                // 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 [as project] (recruiter.service.ts:20)
    at MapSubscriber._next (map.ts:75)
    at (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

    Header tab

    Preview tab

    Friday, April 21, 2017 11:22 AM

All replies

  • 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:

    Thanks for your understanding.

    Best regards,


    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

    Monday, April 24, 2017 1:56 AM