I'm having trouble getting my Angular 8 Project to function in IE11, despite carefully following all the necessary steps

It seems like this issue has been encountered multiple times. Despite trying various solutions, the problem persists. Every time I serve the app and launch it on IE, a syntax error in the vendor.js file pointing to an arrow function keeps appearing.

I have followed these steps:

  • Changed the target in my tsconfig to es5
  • In the browserlist, modified not IE 9-11 to IE 9-11
  • In the polyfill.js file, I uncommented all core-js imports, added the classlist.js import, and even installed the package

Even after completing all these steps, the issue remains unresolved. It appears that only the polyfill.js file is being transpiled to polyfill-es5.js for some unknown reason.

The Angular application setup includes the following:

@angular-devkit/architect           0.801.3
@angular-devkit/build-angular       0.801.3
... (more details)
webpack                             4.35.2

Any advice or insights on how to tackle this?

Best regards,

Nuru

EDIT: The content of my polyfills.ts file:

(content matching original code...)
import 'zone.js/dist/zone';

I also attempted to install and import typedarray and blobjs with no success

As well as my list of dependencies:

(content matching original code...)
"zone.js": "~0.9.1"

Answer №2

If you're encountering compatibility issues with Angular 8 in Microsoft Edge and IE11, it's recommended to configure ES5 in your application's polyfill. Check out this thread for detailed instructions. Once configured, run the serve command using the following syntax:

    ng serve --configuration es5

To address the arrow function problem, consider utilizing Babel to translate the code into ES5 for better compatibility.

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

What could be causing the hover style to not take effect on the leaf nodes in jQuery Treeview?

Upon reviewing Sample 1 on this specific page, you may notice that the text turns red when hovering over the folder entries, but not for the leaf entries. My goal is to have the styling for the leaf entries mimic the behavior of the folder entries. Each b ...

How can you handle events on DOM elements that haven't been created yet in JavaScript?

In my JavaScript module, I have the following code: EntryController = function$entry(args) { MainView(); $('#target').click(function() { alert('Handler called!'); }); } The MainView() function includes a callback ...

The issue of memory leakage in Three.js

I have come across an unusual memory leak in three.js (r73). Here are the steps to reproduce it: 1) Go to the following link using Google Chrome (version 46.0.2490.80 m) http://threejs.org/examples/#webgl_test_memory 2) Open DevTools -> Profiles -> ...

What are the steps involved in creating a definition file for npm?

Is there a recommended way to include a definition file (.d.ts) into an npm module as outlined in this guide? Specifically, how can I reference the node without using \\\ <reference /> due to restrictions? ...

Can the 'Water Shader Animation' be altered to have a non-spherical shape?

http://codepen.io/Khangeldy/pen/gPJoxJ JS // setting up camera, scene, and renderer var scene, camera, renderer; scene = new THREE.Scene(); var fov = 75, aspect = window.innerWidth / window.innerHeight; camera = new THREE.PerspectiveCamera(fov, a ...

the functionality of the multiple dropdown in JavaScript only functions once

Hi everyone, I am new to JavaScript and I am seeking assistance with a dropdown issue I am facing. Currently, I am using a JavaScript code for multi-level dropdowns. However, when I use it for multiple dropdowns, the second dropdown follows the sequence of ...

How to Reload the Active Tab in Angular 5?

In my project, I have noticed that a listener in one of the tabs causes the entire tab to refresh, resulting in it displaying information from the first tab until I switch to another tab and then go back. 1) Is there a way to refresh only the current tab? ...

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

Discord between Bootstrap tabs and C3 charts: A Compatibility Str

On my website, I have implemented Bootstrap navigation tabs that each contain a chart. The issue I am facing is that when I navigate to the home page, the chart in the active tab displays perfectly fine. However, for the other tabs, the charts overlap with ...

Express application functioning solely on the local server

Attempting to create a basic API for a project, I tested the sample code using Postman on two different machines. Surprisingly, when the code is executed on my local machine, it returns the expected response; however, running it on a remote Ubuntu server f ...

The ESLint tool seems to be struggling to detect the package named "@typescript-eslint/eslint-plugin"

Struggling with getting ESLint to function properly on a new Angular project in VS Code. The error message I keep encountering is about failing to load "@typescript-eslint/eslint-plugin". After spending the past 3 hours troubleshooting, I have searched hig ...

A guide to accessing real-time data in Vue.js

This is my debut project in Vue, and I am currently retrieving cart data from the server. My goal is to be able to modify the quantity using Vue. Right now, when I click on the up or down arrow to change the quantity, it gets reflected in the server databa ...

Should items be added or removed from the list when the toggle is activated or deactivated?

$(document).ready(function() { var materials = []; var limit = $("#upper").val(); $("#upper").change(function() { limit = $(this).val(); }); $(".u").click(function() { var color = $(this).attr('data-color'); var id = $(thi ...

The search for d.ts declaration files in the project by 'typeRoots' fails

// Within tsconfig.json under "compilerOptions" "typeRoots": ["./@types", "./node_modules/@types"], // Define custom types for Express Request in {projectRoot}/@types/express/index.d.ts declare global { namespace Express { interface Request { ...

Guide on accessing js file in an Angular application

I have a component where I need to create a function that can search for a specific string value in the provided JavaScript file. How can I achieve this? The file path is '../../../assets/beacons.js' (relative to my component) and it's named ...

There is no overload that matches this call in Angular 12

Just starting out with angular, I decided to try my hand at a mean project following a YouTube tutorial. However, I quickly encountered some issues... https://i.sstatic.net/xLRw7.png https://i.sstatic.net/qBFdr.png https://i.sstatic.net/0l9vE.png Could ...

What is the reason behind the functionality of getElementsByClassName?

Being new to javascript, I am trying to study for my upcoming exam. I came across these code snippets and I'm struggling to understand why they work or don't work: var colection=document.getElementsByClassName("old"); for(var i=0; i< ...

oidc-client-js consistently redirects users to the login page

I've been immersed in a project that involves integrating OIDC authentication into a react SPA using authorization code with PKCE. I'm utilizing the oidc-client-js library for this purpose. The issue I'm facing is that, post-authentication, ...

Ensure that there are no duplicate values across various fields within an array of objects by using a specific condition in JavaScript

Given an array of objects, determine if there are any duplicates based on certain conditions in JavaScript. The following conditions need to be checked: If the object with type 'local' has a duplicate code, return true If the object with ty ...

Combining numerous objects into one object within an array, each with distinct keys, and displaying them using FlatList

I'm struggling to present this information in a FlatList. Array [ Object { "-N1gqvHXUi2LLGdtIumv": Object { "Message": "Aeaaeaea", "Message_CreatedAt": 1652167522975, "Message_by_Ema ...