Encountered 'TypeError: Illegal invocation' while attempting to update from version 1.2

Update: It appears that the issue could be linked to Chrome version 43. I reverted back to version 42 and everything seems to be functioning properly.

Update: I have filed an issue on the Angular Github repository.

The error seems to be originating from 

return logFn.apply(console, args);
in line 12221 of the angular.js source code.

Here is a link to the Chromium bug report.

Any advice on how to proceed next?

I am attempting to update my application from AngularJS v1.2 to either v1.3 or v1.4, but I keep encountering a TypeError: Illegal invocation on Chrome (tested on Windows, OSX, and Ubuntu).

The stack trace does not provide much insight:

TypeError: Illegal invocation
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at Scope.$get.Scope.$digest (angular.js:15550)
    at Scope.$get.Scope.$apply (angular.js:15824)
    at done (angular.js:10263)
    at completeRequest (angular.js:10435)
    at XMLHttpRequest.requestLoaded (angular.js:10376)

This seems to be related to AJAX requests, but I am also seeing:

TypeError: Illegal invocation
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at equals (angular.js:1034)
    at Scope.$get.Scope.$digest (angular.js:15550)
    at Scope.$get.Scope.$apply (angular.js:15824)
    at tick (angular.js:10983)

I am utilizing $interval to update a model class (which is a factory and displayed in the views through setting the $scope.client to this class):

var runTimer = function () {
    self.timeOnline = time(self.timeSoFar);
    self.timeSoFar = Date.now() / 1000 - self.alarmTriggeredTime;
};

$interval(runTimer, 1000);

It seems there may be an issue with $digest/$apply. Despite spending hours troubleshooting, I am still unsure about what is causing this problem.

Any guidance on further debugging would be greatly appreciated.

javascriptangularjsangularjs-digest

Answer №1

Amidst the chaos of the angular-issue, the chromium-bug, the webkit-bug, and the mysterious something-Webkit-issue, it seems like everyone is at a loss. Maybe that's just my take on it though.

Despite my struggles with the window.history.back scenario triggering an "Illegal Invocation," I managed to successfully execute console.log.call(window, 'x') using this handy snippet:

(function() { console.log = console.log.bind(console); }());

(credits to Brian for sharing that nugget of wisdom)

Feel free to insert this little gem at the top of your HTML file or wherever you see fit.

I'm incredibly intrigued by what might unfold if you were to run that @Ignas. Personally, I haven't been able to replicate the issue you encountered with the Factory binding to $scope and running your $interval.

It'd be interesting to observe any impact (albeit merely cosmetic) this could have.

On a side note; being relatively inexperienced, I recently learned from my colleagues that calling console.log.call(window) would indeed result in an Illegal Invocation error, so that particular concern has been put to rest. However, I remain curious about its influence on the logFn within Angular.

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

Clearing the text within textboxes when they are hidden

I am working on an HTML program that includes a checklist. I have it set up so that when I click on an item in the checklist, a text box is displayed, and when I uncheck the item, the text box hides. How can I make it so that when I uncheck an item, the co ...

javascriptjqueryhtmlformstextbox

How can you prevent specific columns from being sortable in AngularJS?

Is it possible to disable sorting on specific columns in an angular JS data table? In jquery data table, I can achieve this with the following code: "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [0, ...

angularjsangular-datatables

Distinguishing between if(a) and if(a!=null && a!=undefined)

While attempting to populate data in the DOM, I am encountering numerous issues due to the absence of values in the objects or arrays I am trying to utilize. Take, for instance, the following object: var obj = { name: 'rajat', age: 20 } Gi ...

javascripthtml

Display an error alert when a specific condition occurs

My page has a code snippet that triggers an error alert when loaded: protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { if (Request.QueryString["message"] == "noemployees") ...

javascriptc#htmlasp.nettwitter-bootstrap

Meteor, app has been upgraded and now receiving error message 'TypeError: check is not defined'

I've been in the process of updating an old meteor project that was running on a version even older than 1.0.0. The issue cropped up at Meteor 1.4.2.3, but strangely another app is working smoothly on the same version. After making several adjustment ...

javascriptnode.jsmeteorupdates

Updating the event listener for `SlideToggle` in Skeleton, the Svelte UI kit

Implementing a toggle switch using SlideToggle from the Skeleton library is what I am attempting to do. <script lang="ts"> import { SlideToggle } from '@brainandbones/skeleton'; let is_checked: boolean = false; </script ...

javascripthtmltypescriptsvelte

In order for Angular forms to be considered valid, they must fall into one of two form

I am attempting to create a dynamic angular form where the user must enter either A or B. A represents a unique identifier, while B consists of a set of values that correspond to that identifier. My goal is to validate the form as valid if either A is ente ...

javascripthtmlangularangular-reactive-formsangular-validation

Simulating service calls in Jest Tests for StencilJs

When testing my StencilJs application with Jest, I encountered an issue with mocking a service class method used in a component. The service class has only one function that prints text: The Component class: import {sayHello} from './helloworld-servi ...

javascripttypescriptjestjsstenciljs

Tips on adding a watermark to multi-page PDFs using an image as the watermark

I am currently working on embedding a watermark onto every page of a PDF file using the image-watermark library. So far, I have successfully added a text watermark to files with only one page but now I am exploring ways to extend this functionality for mul ...

javascriptnode.jspdfnext.jswatermark

Updates made in the angular controller are not reflecting on the HTML page

I am facing an issue with displaying a "no internet access" button in my app when the user is offline and the required object is not available in the cache. Here is the HTML code: <div class="VideoPlayerController video-player-controller"> <span ...

angularjs

Accessing the current state outside of a component using React Context

As I delve into creating a React application, I find myself in uncharted territory with hooks and the new context API. Typically, I rely on Redux for my projects, but this time I wanted to explore the context API and hooks. However, I'm encountering s ...

javascriptreactjsreact-hooksreact-contextreact-state

What is the best way to retrieve a variable from a different file in Next.js?

Currently, I am developing an app in Next.js with 3 main pages: Home, Auth, and Main. The Home page includes a button that redirects the user to the Auth page for Firebase authorization. However, after authorization, when redirecting the user to the Main ...

javascriptreactjsnext.jsnext.js13

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file

Recently, I installed the latest version of aws-amplify using npm. After running npm init with 'entryPoint.js' as the entrypoint file, I encountered an issue when pasting the following code at the top of entryPoint.js: import Amplify, {Auth} from ...

javascriptamazon-web-servicesnpmaws-amplifyjslint

Guide to getting JSON data from AngularJS in Laravel

Can someone assist with this issue? I am trying to send JSON data from angularjs to laravel: This is my angularjs code snippet: $scope.addnew = {name:'',email:'',message:''}; $scope.addnew.name=$scope.name; $scope.addnew.ema ...

mysqlangularjsjsonlaravel

"Learn how to pass around shared state among reducers in React using hooks, all without the need for Redux

I've built a React hooks application in TypeScript that utilizes multiple reducers and the context API. My goal is to maintain a single error state across all reducers which can be managed through the errorReducer. The issue arises when I try to upd ...

javascriptreactjstypescriptreact-hooks

Ways to include a CSS file path in a link tag from an npm package

I have recently installed a package using npm. npm install lightgallery Now, I am trying to fill the href attribute of a link with the css file directory of this package. Here is what I have so far: <link rel="stylesheet" href="/node_mod ...

javascriptnode.jsnpm

Issue with rendering data in VueJS child component

I have created a screen with tabs to organize different data sections, and each tab is meant to be its own component. However, I am facing an issue where the data does not display on the component when it initially renders. Oddly enough, clicking the refr ...

javascriptvue.jsvue-component

I have encountered an issue with my rows breaking improperly when viewing them in a PDF format, particularly when I include a minus

Whenever I try to view my HTML page in PDF form, I encounter an issue. The problem arises when the numerical values are too large, causing a line break between the minus sign and the values. Here is an example of the HTML page which appears perfectly: ent ...

javascriptpythonhtmlpdfwkhtmltopdf

Perform validation on input by monitoring checkbox changes in Angular 4

I am currently working on a project where I need to loop through an array of key values in order to create a list of checkboxes, each accompanied by a disabled input field as a sibling. The requirement is that upon checking a checkbox, the corresponding in ...

javascripthtmlangularangular-formsangular-validation

What is the best way to insert distinct values into an array in mongoDB?

I have a table of likes, and within that table, there is an array called videoLikes. I want to store the userData of users who have liked the video. However, when I attempt to add an object with a userId field to that array, I end up with duplicate data. S ...

javascriptnode.jsarraysmongodb