Issues encountered when attempting to run an Angular 8 application on IE11

I've been attempting to launch my Angular 8 application on Internet Explorer 11. Despite following all the outlined steps in this informative article, Angular 8 and IE 11,

I am still encountering errors as shown in this screenshot ->IE console

Below are the pertinent files :

Polyfills.ts:

    /***************************************************************************************************
 * BROWSER POLYFILLS
 */


/** To support NgClass on SVG elements in IE10 and IE11 */

import 'classlist.js';  // Execute `npm install --save classlist.js`.


/*

 * Web Animations required for `@angular/platform-browser/animations`

 * Essential only if AnimationBuilder is utilized within the app and dealing with IE/Edge or Safari.

 */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

** The subsequent polyfills are needed for IE9, IE10, and IE11. **/

import 'core-js/es/symbol';

import 'core-js/es/promise';

import 'core-js/es/object';

import 'core-js/es/function';

import 'core-js/es/parse-int';

import 'core-js/es/parse-float';

import 'core-js/es/number';

import 'core-js/es/math';

import 'core-js/es/string';

import 'core-js/es/date';

import 'core-js/es/array';

import 'core-js/es/regexp';

import 'core-js/es/map';

import 'core-js/es/weak-map';

import 'core-js/es/set';

import 'zone.js/dist/zone';  // Integrated with Angular CLI.

BROWERSLIST:

// > 0.5%

last 2 versions

Firefox ESR

not dead

 IE 9-11 # For supporting IE 9-11, remove 'not'.

TSCONFIG.JSON:

{
  "compileOnSave": false,

  "compilerOptions": {

    "baseUrl": "./",

    "outDir": "./dist/out-tsc",

    "sourceMap": true,

    "declaration": false,

    "downlevelIteration": true,

    "experimentalDecorators": true,

    "module": "esnext",

    "moduleResolution": "node",

    "importHelpers": true,

    "target": "es5",

    "typeRoots": [

      "node_modules/@types"

    ],

    "lib": [

      "es2018",

      "dom"

    ]
  },

  "angularCompilerOptions": {

    "fullTemplateTypeCheck": true,

    "strictInjectionParameters": true
  }
}

WEB.CONFIG:

<?xml version="1.0" encoding="utf-8"?>
<!--
...

ANGULAR.JSON:

{

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...

PACKAGE.JSON

  {
  ...

**The provided solution should be compatible with ng build.

Answer №1

Many thanks for your valuable assistance. My issue was successfully resolved by making a simple tweak:

"target": "es2015",

changed to

"target": "es5",

within the tsconfig.json file. Additionally, I encountered difficulties due to a problematic script file in my assets folder leading to errors. Once I eliminated it from the project, everything functioned smoothly on IE11. Henceforth, always inspect your asset files before implementing any modifications for IE11 to prevent potential issues.

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

Guide to linking switchMap operators with feature bodies in RxJS version 6

I am currently working on upgrading my mobile app, which is built with Ionic and Angular. I need to migrate from rxjs 5.5 to rxjs 6, but I have encountered some challenges, especially in the way operators are handled within the pipe-chain. The migration do ...

The information from the data source is not getting filled in

I recently started working with Angular (Version 14.2.10) and I am trying to make a REST call to populate data in the UI. However, only the header is displayed without any data showing up. I suspect there is a minor issue that I can't seem to pinpoint ...

Encountering a Maximum call stack size exceeded error during the construction of a library package with Angular 12

I encountered an issue when trying to add export of my module in public-api.ts. The Angular compiler threw a "Maximum call stack size exceeded" error, but did not provide any clue about the cause. Can anyone suggest a solution for this problem? I have noti ...

Retrieve the value of [routerLinkActive] in the component's class

Recently, I've been working on a tab component called TabComponent and it includes the following HTML template: <a [routerLink]='link' [routerLinkActive]="[is-active]">link label</a> <button>Close tab</button> The c ...

I am unable to locate the module '@schematics/angular/utility/config'

I attempted to execute the command below in order to add ngx-bootstrap to my project: ng add ngx-bootstrap Unfortunately, I encountered an error message. The full CLI output is displayed below: i Using package manager: npm √ Found compatible package ver ...

Press the second form submit button after the completion of another Observable

Below is the unique process we aim to accomplish using solely RXJS Observables: Press Login button (form with username & password). We bind Observable.fromEvent with our form. Upon submitting the form, call loginUser() to send an http request to serv ...

When a URL is entered, information is not retrieved from the database

I have a simple app setup where the data (iPhones from the database) is fetched in the AppComponent itself. ngOnInit(): void { this.iphoneservice.fetchIphones(); } The fetchIphones method is located in my iPhoneService file and consists of 3 functio ...

Angular 17 SSR Swiper 11: Why aren't the breakpoints functioning as expected?

I'm currently struggling with implementing breakpoints in the swiper code. Despite multiple efforts, I have not been able to successfully integrate the breakpoints, and it seems like the functionality is not working as intended. I'm reaching out ...

Creating Elements with Angular 2

How can I use the document.createelement statement in TypeScript? I have been trying to solve this issue but haven't found a solution yet. Is there a way to create this function? Below is the component: import {Component,ViewChild, ElementRef} from ...

Testing the Binding of Models in Angular 5 Using Jasmine Framework

I'm currently working on writing a unit test to verify that the JSON data returned from the components method call successfully links to a TypeScript model. Here's what my model looks like: export interface IPlayerAccount { playerId: number; ...

Building a ng-select in reactive forms involves adding dynamic options to a select box using Angular

I've been scouring various websites, but I haven't had any luck finding a solution. How can we create an ng-select in reactive forms? I want to include the following HTML tag within a reactive form, as shown in the code snippet below. HTML: < ...

Angular log out function to automatically close pop-up windows

Within my application, there is a page where users can open a popup window. When the user clicks on logout, it should close the popup window. To achieve this, I have used a static variable to store the popup window reference in the Global.ts class. public ...

How can I utilize a single component across several pages in Angular for optimal efficiency?

I am currently in the process of developing a website that will have consistent formatting for the 'about us,' services, and contact us sections. The desired format includes: A banner photo A main heading A description Instead of creating sepa ...

I'm experiencing a strange issue where my React component renders twice in production mode, despite having strict mode turned off. Can anyone advise me on

Within my layout.tsx, I have a structure that encloses the page with a container div and introduces a separately defined TopBar component alongside. The functionality seems fine, but an issue arises where the component is created before the {children}, as ...

Inquiring about Vue 3 with TypeScript and Enhancing Types for Compatibility with Plugins

I've been struggling to find a working example of how to implement type augmentation with Vue3 and TypeScript. I have searched for hours without success, trying to adapt the Vue2 documentation for Vue3. It appears that the Vue object in the vue-class ...

Connecting attribute in Angular 5 through @Input

(UPDATED) I originally had a basic jarallax setup with just a div containing the corresponding configuration in a component: <div class="view cover-jarallax" data-jarallax="{"speed": '0.w'}" style="background-image: url(imgurl);' + &apo ...

What is the best way to handle success data in React Query?

Currently, I have an API call function (using httpClient as axios instance) interface IRegisterResponse { accessToken: string; } export const register = async ({ name, password, token, }: IRegisterParams) => await httpClient.post<IRegiste ...

Encountering an Error When Posting with Angular 2 HTTP

I am encountering an issue with my Ionic 2 app that is trying to retrieve events from Facebook. I am attempting to send a post request to the Graph Api using a batch containing multiple requests, but every time I subscribe, I receive the following error: ...

Tips for verifying Angular material input for Year

Users should only be able to enter valid years (e.g., 2020) in the Purchase Year form field. An error message should display if an invalid number or text is entered. While many suggest using a datepicker, I specifically need users to only input the year v ...

Will the component re-render before executing the next lines when using setState or dispatch with the useReducer hook?

Upon using the useState and useReducer hooks, I encountered an issue where any code lines following the state update function (setState, dispatch) would be executed in the subsequent re-rendering, with the previous state intact before the update. Essential ...