Angular 5 http post not sending requests

Question

I'm trying to implement authorization in Angular 5 app. I have auth.service.ts and login() method in it, which returns Observable<any>. It looks like this:

login(loginForm: LoginForm): Observable<any> {
    debugger;
    return this.http.post(`${this.endpoint}session/login`, loginForm)
        .map(res => {
            return res;
        }).catch(error => {
            debugger;
            return Observable.of(false);
        });
}

The problem is that, when I call login method from component, http.post throws error, it stops on debugger and error looks like this:

AppComponent.html:15 ERROR TypeError: Converting circular structure to JSON
at JSON.stringify (<anonymous>)
at HttpRequest.serializeBody (http.js:916)
at Observable.eval [as _subscribe] (http.js:2196)
at Observable._trySubscribe (Observable.js:172)
at Observable.subscribe (Observable.js:160)
at subscribeToResult (subscribeToResult.js:23)
at MergeMapSubscriber._innerSub (mergeMap.js:138)
at MergeMapSubscriber._tryNext (mergeMap.js:135)
at MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)

and there's no XHR request logged in chrome network tab. Any ideas?

possible duplicate of https://stackoverflow.com/questions/4816099/chrome-sendrequest-error-typeerror-converting-circular-structure-to-json — Safiyya, Feb 24 '18 at 10:37
Hi .. are you using any ORM on the back end? .. i think you've a Object structure with a circular depenedency — federico scamuzzi, Feb 24 '18 at 10:45
The error message is quite clear: you're trying to send an object, so it needs to be transformed to JSON, but this object contains a circular structure, so can't be transformed to JSON. Check what LoginForm is and contains. — JB Nizet, Feb 24 '18 at 10:47

score 1 · Accepted Answer · answered Feb 24 '18 at 12:16

As @JBNizet pointed that I'm trying to send an object, which couldn't be transformed to JSON, I checked my LoginForm, it looked like this:

export class LoginForm {
    constructor(public email?: string,
        public password?: string) {}
}

I changed my class to:

export class LoginForm {
    public email: string;
    public password: string;
}

and it's working now

Angular 5 http post not sending requests

1 Answers1