Angular 4: Web API call mapping not working. ProgressEvent returned with error

Question

I am trying to call a web api end point using code like this.

verifyUserLogin(userName: string, password: string): Observable<UserSession>
{
    let observable = this._http.get(this.baseUrl + "?userName=" + encodeURIComponent(userName) + "&password=" + encodeURIComponent(password));
    return observable
        .map(this.convertResponseToUserSession)
        .do(data => this.logData(data))
        .catch(this.handleError);
}

The conversion function in the map call is as follows.

private convertResponseToUserSession (res: Response)
{
    let body = res.json();
    return body.data || { };
}

Using fiddler I get the following RAW response.

HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/10.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?RDpcUHJvamVjdHNcU05DQ2xpZW50c1xTTkNDbGllbnRzXGFwaVxVc2Vy?=
X-Powered-By: ASP.NET
Date: Tue, 09 May 2017 17:49:52 GMT
Content-Length: 465
{"id":"c384bf34-6bbc-45a9-944f-6d2d4f7874af","lastAccess":"2017-05-09T14:18:39.7111621-04:00","userId":"arsalan","displayName":"Arsalan","emailAddress":"[email protected]","employeeId":"3123123","compnayAddressNumber":123123,"departmentAddressNumber":123123,"homeDepartmentAddressNumber":123123,"lineId":0,"phoneNumber":"123-456-7890","companyName":"My Corporation","homeDepartment":"Information Technology","managerName":"My Manager"}

For the class

export class UserSession {
    public Id: string;
    public lastAccess: Date;
    public userId: string;
    public displayName: string;
    public emailAddress: string;
    public employeeId: string;
    public compnayAddressNumber: number;
    public departmentAddressNumber: number;
    public homeDepartmentAddressNumber: number;
    public lineId: number;
    public phoneNumber: string;
    public companyName: string;
    public homeDepartment: string;
    public managerName: string;

    isSessionValid () : boolean
    {
        if(this.Id && this.Id.length === 36)
        {
            return true;
        }

        return false;
    }
}

The function convertResponseToUserSession never gets called, only handleError is called.

private handleError(error: any)
{       
    ...
}

where error is a Response object and erorr.toString() return "‌Response with status: 0 for URL: null" and error.json() returns ProgressEvent

The function verifyUserLogin is being called from a submit event handler as follows.

loginUserClicked(): void
{
    this.formWaiting = true;
    this._userService.verifyUserLogin(this.userName, this.password)
        .subscribe((userSession: UserSession) =>
    {
        if (!userSession)
        {
            alert(`Username or password is incorrect.`);
            return;
        }
        this.userAuthenticated.emit(userSession);
    }, (error) =>
    {
        this.errorMessage = <any> error;
        alert(`There was an error trying to log you in. Please contact support.`);
    });
}

Answer 1

The error

"‌Response with status: 0 for URL: null" 

would point to a CORS issue, as per said here: Angular 2: EXCEPTION: Response with status: 0 for URL: null

CORS needs to be enabled on server side, and in some cases also enabling cors in the browser itself (during development). This can easily be done with chrome extension available here.

And if you are using Firefox, you can use the plugin for FireFox: cross-domain plugin