Angular 2 Error: When used in strict mode functions or arguments objects, the properties 'caller', 'callee', and 'arguments' may cause a TypeError

I'm facing an issue with Angular 2 that seems to be a common problem, but I haven't been able to find a solution yet. I've created a service that is called from another Component, which works fine.

The problem arises when I try to make an http POST request and encounter the following 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 screenshot
complete error screenshot

It appears that the error is occurring in the handleErrorObservable function, as the POST request is not being executed. When I check the network tab in Chrome, I don't see any POST call to the API.

Here's the code for my service:

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions } from '@angular/http';
import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
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);
    }
}

Any assistance on resolving this issue would be greatly appreciated. Thank you.

Answer №1

From my observations, it appears that the reason your request is not going through is because you have not included .subscribe anywhere in your observable. Remember, observables are like functions that need to be called in order to execute. The subscribe method is what triggers the functions and all associated operators to run.

What you're seeing in the developer tools is not an actual error message from the request, but rather a notification that certain information like arguments, caller, and callee cannot be accessed through the tools.

The solution here is simple - make sure to include the subscribe method (or consider using the async pipe) to ensure proper execution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on redirecting a page using AJAX while also sending data to a controller

Is it possible to redirect to another page after a successful action, but not able to retrieve the data that was passed? Here is the jQuery code: $.ajax({ type:'GET', url:link, data:data, success:functio ...

The request for an advertisement was successful, however, no ad could be displayed as there was insufficient ad inventory available. Please handle the situation appropriately with the

Using react-native, I am trying to incorporate ads into my app but encountering an error. Despite attempting various solutions, nothing seems to work. It appears that the issue may lie with the AdMob Android SDK. While I have reviewed SDK videos related to ...

Error 404: Node.js and Express encountering issues with POST request to '/webhook' endpoint

https://i.sstatic.net/CTDCv.pnghttps://i.sstatic.net/KjPeC.pngI've encountered a peculiar issue where I keep receiving a 404 error specifically when sending a post request to '/webhook'. This error is persistent even though the rest of my po ...

The behavior of Android webview varies when executing JavaScript code

I am currently involved in a project that involves reading user input via voice and displaying it on a website. I am able to read all input IDs on the site using Jsoup. WebView webView = (WebView) findViewById(R.id.webview); webView.getSetting ...

Produce HTML content onto Google Drive Documents using JavaScript

Currently, I am working on a project that requires me to render the HTML form output in a new Google Docs document (a Word file, not a spreadsheet). Despite my efforts to find information online, all I can come across is related to spreadsheets. The main ...

What is the best way to selectively pass certain values to the args object?

Is there a way in TypeScript to pass only one argument into args and have other values be default without using "args = {}" or declaring defaults within the function to avoid issues with intellisense? function generateBrickPattern ( wallWidth: number, ...

Problem with BehaviorSubject: next() method is not functioning as expected

My goal is to utilize an angular service for storing and communicating data via observables. Below is the implementation of my service: public _currentLegal = new BehaviorSubject({ name: 'init', _id: 'init', country: 'init& ...

Adding specific props, such as fullWidth, at a certain width, like 'sm', in Material UI React

My goal is to include the fullWidth prop when the screen reaches a size of 600px or greater, which is equivalent to the breakpoint sm. I attempted to implement the following code, but unfortunately, it does not seem to be functioning as intended. [theme ...

What is the best way to manage a session using JavaScript?

Currently developing a website that initially hides all elements except for the password box upon loading. Once the user enters the correct password, all webpage elements are revealed. Seeking a solution to keep the elements visible on reload by utilizing ...

Positioning broadcasted videos on a web page using the OpenTok API

Currently, I am utilizing opentok to connect to the broadcast service and obtaining the flash player object at the bottom of my page. I am seeking guidance on how to position it within a specific div container. The following code snippet demonstrates how ...

What methods can be utilized to accurately determine a user's online status without continuously sending AJAX requests to the server through setInterval?

Seeking effective methods to determine a user's online status I am currently employing an inefficient technique to address this issue: I continuously send AJAX requests to the server at set intervals using setInterval, allowing the server to gauge th ...

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

Using v-model with checkboxes in vue.js: A Step-by-Step Guide

How can I use a checkbox with a v-model in Vue2.js? <input type="checkbox" value="test" :checked="selected"/> I need the value of the checkbox to be test, and I also require two-way binding with the prop named selected, ...

An error has occurred: The repository is not clear. Kindly commit or stash any modifications before proceeding with the update

I am looking to upgrade my Angular 6 project to Angular 8. First step is to execute npm install -g @angular/cli@latest (this code works fine). Next, run ng update @angular/cli @angular/core. However, I encountered the following error: The repository i ...

The function '$.fn.<new_function>' is not a valid function in jQuery

UPDATE: code link with enhanced formatting: UPDATE: code upgraded with enhancements from JSHint http://pastebin.com/hkDQfZy1 I am attempting to utilize $.fn to establish a new function on jQuery objects by this method: $.fn.animateAuto = function(x,y) { ...

Discover and showcase individual product information using Product ID in Angular 8 with Firebase integration

I've been struggling to retrieve a single product record from Firebase using Angular 8. I'm new to this and have spent the past two days trying to figure it out. Below is my Firebase database. I have all products displayed on one page, and when c ...

Doing server side function calls from the client in NodeJs

I recently embarked on a journey to learn web development and am eager to make server-side data changes when invoking client functions. Take a look at my sample server setup: const fs = require('fs'); const path = require('path'); con ...

Node module for Nativescript angular project that enables multi select dropdown or picker functionality

Does anyone know of a Node NPM module for creating a multi-select dropdown in NativeScript Angular? I've searched through many plugins in the NativeScript marketplace, but haven't been able to find one that fits my needs. I need the plugin to wo ...

Solving template strings in a future context

I have a unique use-case scenario where I am filling the innerHTML like this. However, my issue lies in resolving the template literal within the context of a for loop. Any suggestions on how to accomplish this? var blog_entries_dom = 'blog_entries& ...

Express: router.route continues processing without sending the request

I've implemented the following code in my Express application: var express = require('express'); // Initializing Express var app = express(); // Creating our app using Express var bodyParser = require(' ...