Error SCRIPT1002 was encountered in the vendor.js file while using Angular 8 on Internet Explorer 11

Having trouble getting Angular to function properly in IE 11. I've tried all the solutions I could find online.

The errors I'm encountering are as follows:

SCRIPT1002: Syntax error

File: vendor.js, Line: 110874, Column: 40

At line 110874

args[0].replace(/%[a-zA-Z%]/g, match => {
    if (match === '%%') {
        return;
    }
    index++;
    if (match === '%c') {
        // We only are interested in the *last* %c
        // (the user may have provided their own)
        lastC = index;
    }
});

I have already implemented the recommended ES5 configurations suggested by Angular and am running with these settings (https://angular.io/guide/deployment Configuring serves for ES5).

Here's my polyfills.ts file content:

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone';  // Included with Angular CLI.

My tsconfig.json looks like this:

{
    "compileOnSave": false,
    "compilerOptions": {
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "module": "esnext",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ]
    }
}

And here's my tsconfig.es5.json file:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "target": "es5" 
     }
   }

I'm using Angular 8 along with Primeng, and running with ng serve --configuration es5;

Update: After some investigation, it appears that the issue is related to the dependencies of the socket-io-client I'm using. Upon further research, it seems that the problem lies within the debug and babel dependencies of socket-io-client. Since I need to utilize the socket on my system, I'm still searching for a solution. However, removing the socket-io-client allows the application to run smoothly.

I identified the root cause of the problem through these two discussions:

https://github.com/visionmedia/debug/issues/729

https://github.com/babel/babel/issues/10707

Answer №1

If you're facing issues with arrow functions not being transpiled correctly, it could be due to following errors in the transpilation process. Make sure to check out the recommended steps provided in this helpful response for supporting Angular 8 in IE 11. In case you've already followed these instructions and are still encountering problems, it's possible that an external JavaScript library containing arrow functions is causing the issue.

Remember, Angular CLI does not handle the transpilation of JavaScript code. Third-party libraries need to be in a compatible format, preferably ES5 for compatibility with IE 11.

You may also find guidance from this discussion thread, where setting lib to "es5", "es6", or "dom" might resolve the problem. If this doesn't work, consider using an ES5 version of the library instead.

---------------------------------------------------------------------Edit-------------------------------------------------------------

To address module transpilation concerns, explore utilizing the exclude property within your webpack.config.js or babel.config.js. You can modify your configuration from:

...
  exclude: /node_modules/,
...

to something like:

...
  exclude: /node_modules\/(?!name-of-untranspiled-module)/,
...

For further insights, take a look at How to handle npm modules which include es6.

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 concept of next middle-ware within the realm of Express.js and Sail.js controllers

Currently, I am utilizing sails.js framework which is constructed on top of express.js. Within my routes.js file, I have defined a route as shown below: '/account/login': { controller : 'Session', action : 'l ...

Having difficulty with setting up the Webpack css-loader, encountering an error during compilation

As a newcomer to webpack, I have been experimenting with creating my own build by modifying an existing one. One issue I encountered was the css not compiling, so I took the following steps: Confirmed that there were no css loaders already included in th ...

Utilizing conditional statements in React js to showcase a distinct component

I am looking to create a function or conditional statement that dynamically displays different components based on whether the user has purchased products. If the user has bought products, I want to display the product components; if not, I would like to s ...

Angular only allows click events to trigger during a push

Is there a way to reveal the password without requiring a click, but simply by pushing on an eye icon? My code HTML <input [formControlName]="'password'" [type]="isShow ? 'text' : 'password'" class=&qu ...

I am unable to integrate Autoprefixer into an Express project

I am having trouble adding Autoprefixers to the postcssmiddleware, as mentioned in the documentation here I also attempted using express-autoprefixers but still cannot see the vendors in my dest or public folder. You can find a link to my repository (node ...

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

Is it possible to export files from Flash to CreateJS via the command line?

Is there a method to automatically run the createjs toolkit for Flash tool from the command line? I have multiple components that I need to export in bulk. Is it possible to do this in a batch process? ...

Working with an arbitrary number of arguments in TypeScript

Looking for a way to pass an arbitrary number of arguments with different types into a function and utilize those types, similar to the following: function f<A>(a: A): A; function f<A, B>(a: A, b: B): A & B; function f<A, B, C>(a: A, ...

Utilizing ReactStrap: a guide to retrieving the id of the chosen dropDownItem

In my code, I have a dropdownList component with various DropdownItems: <Dropdown isOpen={this.state.dropdownOpen[3]} toggle={() => { this.toggle(3); }} > <DropdownToggle className="my-dropdown" car ...

Fetching JSON data from a Node.js server and displaying it in an Angular 6 application

Here is the code snippet from my app.js: app.get('/post', (req,res) =>{ let data = [{ userId: 10, id: 98, title: 'laboriosam dolor voluptates', body: 'doloremque ex facilis sit sint culpa{ userId: 10' ...

Transferring data to .NET using Angular's POST method

I am encountering an issue when trying to send parameters to the .net side as they are coming back as undefined. The main problem I am facing is that I have two post methods with the same parameters, so I attempted to send a string along with the other one ...

First experience with Django Bootstrap Modal Ajax was flawless, but on the second attempt, it was not as successful

I am currently utilizing Django 2.2 in conjunction with Bootstrap. The method implemented is as follows: Triggering the opening of a modal window, User updates the data, User saves the data, Underlying table from where the window originated is updated a ...

Execute the javascript function asynchronously

I need to call the constGrid(arg1) function 3 times to set up an extjs grid when my form loads. There are other fields on my page as well. I want to ensure that the page does not hang or wait for the method to complete. onLoad(function() { for (var i= ...

Creating methods that are shared, privileged, and publicly accessible: A guide

Currently, some methods in one of my classes are public but can access private variables due to being privileged. This is because they are generated in the class constructor, allowing their closure to have access to the object closure. However, I am conce ...

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Currently I am working on an Ionic/Angular application and I have encountered a situation where I am attempting to utilize ngModel. Essentially, I am trying to implement the following functionality within my app: <ion-list> <ion-item> <ion ...

Exploring the Capabilities of TypeScript 1.8 in Visual Studio 2017

Recently, I've encountered an issue with my Visual Studio project that was created using TypeScript 1.8 in Visual Studio 2015. Upon upgrading to Visual Studio 2017 and attempting to open the project in the new IDE, I noticed that the TypeScript versio ...

nodemon breaks down frequently while anticipating changes in files

After cloning a project that I finished 2 months ago, I am facing an issue where nodemon won't run. Despite trying to close npm using task manager on Windows and running it again, the error persists. I am also utilizing MongoDB as my database. If any ...

What is the process for adding images from CSS (backgrounds, etc.) to the build folder with webpack?

Trying out the file loader for processing images and adding them to my build folder. Images within HTML files successfully show up in the build, but the ones from styles do not. I've divided my webpack configuration into two separate files and use t ...

Error encountered when attempting to use _id from a different collection due to a duplicate key

In my database, I currently have 2 collections set up. The first one is a 'Users' collection (which is functioning properly), and the other is a 'Rooms' collection (both designed for a chat application). I am looking to ensure that e ...

Using Angular 4 to transfer data from a dynamic modal to a component

Currently implementing material design, I have set up a dialogService for dynamically loading MdDialog. My goal is to create a search dialog with filters that, upon submission, directs the user to a search-results component route. However, I am struggling ...