Angular 2 Exception: TypeError: 'caller', 'callee', and 'arguments' properties may on strict mode functions or the arguments objects

Question

I have a problem in Angular 2, I know this is a recurring problem, but I could not find the resolution. I made a service wich is called from another Component, is no problem there. The problem was in the service, I'm trying to make a http POST and get and error: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.remoteFunction error capture complete error capture

Apparently the error is given in handleErrorObservable, because the post is not executed either, looking at the network tab in Chrome I do not see any POST call to the api. Here my service Code.

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions } from '@angular/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { User } from "./user";
import { HttpHeaders } from '@angular/common/http';
import { Headers  } from '@angular/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

 

@Injectable()
export class RegisterService {
     usersUrl: 'http://localhost:8080/TrabajoPromocion/users/';  
    constructor(private http:Http) { }
 
    addBookWithObservable( ): Observable<User> { 
        let body = JSON.stringify({   
            "fullname": "a",
            "username": "h",
            "password": "3",
            "email": "33"
        }); 
        
        let headers = new Headers({ 'Content-Type': 'application/json' });
        console.log('3');
        let options = new RequestOptions({ headers: headers });
         return this.http.post(this.usersUrl, body, options)
                       .map(this.extractData)
                       .catch(this.handleErrorObservable);             
        }
     
    private extractData(res: Response) { 
        let body = res.json();
            return body || {};
        }
    private handleErrorObservable (error: Response | any) { 
        console.error(error.message || error);
        return Observable.throw(error.message || error);
            }
    
    
}

Thanks to all, any help is welcome.

Answer 1

Based on what I've seen I can assume that the reason your request is not being sent is that you don't call .subscribe anywhere on you observable. Observables are just functions and they are not executed until you call them. That's what subscribe does - calls the functions and all the operators are then executed as well.

What you are seeing in the developers tools is not the actual error from the request, it's the message to you that you cannot view the arguments or the caller, or the callee of the function in developer's tools.

So the solution is to simply add the subscribe call (or async pipe would also do the job).