Angular 2 and above: Internet Explorer issue - Cannot access 'call' property on undefined or null object

Encountering errors in Angular 4.2.4 (Angular-CLI 1.1.3) on IE11 - Specifically getting SCRIPT1002: Syntax error and 

SCRIPT5007: Unable to get property 'call' of undefined or null reference
. Polyfills are in place, yet the issues persist. What could be missing in this setup?

The error message 

Unable to get property 'call' of undefined or null reference
points to 
bootstrap 50034e0a1f93dabcb117 (54, 1)
without specifying a filename. On the other hand, Syntax error indicates an issue in vendor.bundle.js (63117,26), where the script appears as:

window.setTimeout(() => {
    window.removeEventListener('click', suppressClick, true);
}, 0);

Update: Upon closer inspection, it seems that the problem lies in ES6 code not being compiled down to ES5 as expected.

javascriptangulartypescriptwebpackangular-cli

Answer №1

While there may be various issues causing problems, I recently encountered a challenge with browser compatibility. The solution that worked for me was incorporating polyfills. Consider uncommenting the lines below:

/** Ensure compatibility with IE9, IE10, and IE11 by using these polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

After making this adjustment, run your application again. This should resolve compatibility issues, potentially working on IE10 and above. Given the error message received, it's likely to address similar concerns for you too.

Answer №2

Consider including jQuery polyfills directly from the assets folder:

Inside the head section of index.html:

<script src="assets/...">

You could also experiment with utilizing https://plugins.jquery.com/webshims/

Answer №3

If you are still facing the same problem, consider trying this solution:

Angular 2+: IE 11 Unable to get property 'call' of undefined or null reference

In case the error is related to a code snippet like the one below:

window.setTimeout(() => {
    window.removeEventListener('click', suppressClick, true);
}, 0);

Please provide feedback on whether the solution worked for you or not. I will update my answer accordingly and may mark this question as resolved.

It seems that the issues in bundle.js are different from those discussed here. Despite someone downvoting this answer without clarification, I believe it's important to point out potential solutions for others to try.

Although I'm unable to test it currently, I hope this information leads to a resolution for you. Good luck!

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

Exploring the functionalities of Node Express 3x with socket IO through testing

I attempted to integrate socket IO into my project, but unfortunately, I couldn't get it to work properly. This is my app.js: /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); va ...

javascriptnode.jsexpresssocket.io

Exploring the endless possibilities: Testing a never-ending stream using Jasmine Marbles

When working with my Angular service, I have implemented code that utilizes polling to display a spinner until a specific condition is met: @Inject({…}) export class SomeService { backendCall(): Observable<SomeStatusWrapper> { return this.htt ...

angularunit-testingrxjsjasmine-marbles

Using Angular's ngIf directive to dynamically add the selected attribute to an option based on a specific string

I need to dynamically set the selected attribute for an option in a select drop-down list. Here is an example of what I want to achieve: <select name="gcodeProfile"> <option value="HT Translucent F WF 500 um.gcode.profile& ...

htmlangularangular-ng-if

What is the Importance of Injecting Services, Constants, and Other Dependencies?

Imagine I go ahead and create an AngularJs service. Then I attach it to my module like this: angular.module('fooModule').service('myService', function(){ var service = { logSomething: function() { console.log(&a ...

javascriptangularjsdependency-injection

Adding graphs dynamically to Dygraphs allows for real-time updates and interactive data

I recently started using Dygraphs for one of my projects and I am still learning how to work with it. After reading through the documentation and looking at a few examples, I noticed that the constructor for Dygraphs requires a div element where the graph ...

javascriptjqueryhtmldygraphs

What could be causing the Google Sign-In functionality to fail in an Angular web application?

I'm currently working on implementing Google sign-in for my web app. I've been following this tutorial here. However, I'm facing an issue where the Google sign-in button is not appearing. I would like the authentication to happen at http://l ...

angulartypescriptapigoogle-apigoogle-signin

Invalid Media Type received following the request

I am trying to send a POST request from my Angular client to a Spring endpoint. Here is the endpoint in my HomeController: @RestController() public class HomeController { @PostMapping(value = "/payment/{unique_transaction_id}") public ResponseEnt ...

javaangularspringtypescriptspring-rest

Learn how to serialize and submit all form components within a specified element using AJAX

I am attempting to serialize and post all form elements that may originate from either within a <form> element, or any other elements such as divs, trs, etc. In essence, my form can be structured in two ways: <form id="frm1"> Name: ...

javascriptjqueryajax

Troubleshooting: JQuery dropdown selection not updating image display

I am trying to create a select menu that changes the car image when a user selects a different model, but for some reason it is not working. Here is what I have tried: <h2 class="model">A6 <img src="images/3.jpg" id="image" width="544" height="2 ...

javascriptjquery

Is it possible to send a single backend request to serve multiple endpoints?

http://examplewebsite.com/product-list?gender=2&category=4 http://examplewebsite.com/product-list?gender=2 http://examplewebsite.com/product-list?category=4 I am looking to consolidate these endpoints into one backend controller. Is it possible to a ...

node.jsangular

What is the method for determining the constant array type based on its contents?

Suppose an array is declared as follows: const array = ['a', 'b', 'c']; The type of this array would be string[]. Is there a way to automatically determine the type based on the content, so that there is no need to specify th ...

arraystypescript

Creating consistent random numbers on both the client and server in Meteor

Seeking a way to generate the same random number on both the client and server using Meteor in order to take advantage of the client method's latency compensation. Noted that Meteor offers a random package: Lacking understanding in random number gen ...

javascriptnode.jsrandommeteor

Adjust an IntervalObservable's interval by incorporating a variable

I've encountered an issue with a component that needs to run code at regular intervals without pausing. I'm currently using an IntervalObservable and need to adjust the interval dynamically. While I can change the variable value using the setTime ...

angulartypescriptobservableangular2-observables

Unable to generate a mapping profile for DTO to entity conversion

Currently, I am utilizing NestJs in conjunction with the automapper library from https://github.com/nartc/mapper. Although I have a strong affinity for this library, it lacks structured documentation specifically tailored for NestJs. As a result, numerous ...

typescriptnestjsbackendautomapperdto

Discover the identities of elements that possess a specific attribute and class

I am looking to identify the ids of elements that have both the attribute data-test and the class myClass. In this scenario, the only element that meets both criteria is elem3: <input type="text" data-test="someValue" id="elem1" /> <input type=" ...

javascriptjquery

Accessing/Storing Pictures in MongoDB using Mongoose

I've been struggling with managing images in MongoDB for a while now. Everywhere I look suggests using GridFS because of the 16mb size limit per document. However, the documents I want to store are all <16mb each. Currently, I am storing it like th ...

javascriptnode.jsmongodb

Introducing a custom JavaScript function using Selenium in Java

I am faced with the challenge of incorporating a dynamic function after the page has loaded. This need arises because the function name is dependent on a variable obtained through parsing HTML. Presently, my approach involves: Context: Using Selenium 3.3. ...

javascriptjavaselenium

Sending form data using javascript without refreshing the page

I have a wall/social system similar to Facebook where users can post statuses. I want to add the functionality for users to like, dislike, and comment on a status without the page reloading. How can I achieve this with the form below? if(empty($_GET[&apos ...

javascriptphpjqueryforms

Colorbox scalePhotos function malfunctioning

The scalePhotos option in Colorbox does not seem to be working correctly for me. I have tried various methods to set it, including initializing Colorbox using the following code snippet right before the closing </body> tag in my HTML: jQuery('a ...

javascriptjqueryhtmlcsscolorbox

Error message: "Function is not defined"

Below is a snippet of my JavaScript code: $('td:eq(2)', nRow).html('<a class="critical" href="#" OnClick="toAjax(\''+aData[1]+'\', \''+aData[2]+'\');">'+aData[3]+'& ...

javascriptjquery