DEV Community

Cover image for Angular < 13: How to support IE11

Angular < 13: How to support IE11

Colum Ferry on January 10, 2020

EDIT: FROM ANGULAR V13, IE11 CAN NO LONGER BE SUPPORTED. IF YOU NEED TO SUPPORT IE11, PLEASE USE A VERSION OF ANGULAR &lt;13 In this article I ...
Read full post
Collapse
 
vjamwec13579 profile image
vjamwec13579 •

Nice summation on what is required. Our team had already implemented most of these but others using our Angular library were not able to get some of the features in our library to work. Thank you for putting this together!

Collapse
 
katik1408 profile image
Kartik Saxena •

To give support for IE 11 is huge pain in the ass.. I trying my butt off from past 2 days tried each and every solution given on any blog or any video... tried the which is here as well still there is no luck with me...
I'm still facing the issue.

Collapse
 
coly010 profile image
Colum Ferry •

What issues are you seeing?

Collapse
 
katik1408 profile image
Kartik Saxena •

Here is my pollyfills.js
/***************************************************************************************************

  • Load $localize onto the global scope - used if i18n tags appear in Angular templates. / import '@angular/localize/init'; /*
  • This file includes polyfills needed by Angular and is loaded before the app.
  • You can add your own extra polyfills to this file. *
  • This file is divided into 2 sections:
  • 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
  • 2. Application imports. Files imported after ZoneJS that should be loaded before your main
  • file. *
  • The current setup is for so-called "evergreen" browsers; the last versions of browsers that
  • automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  • Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. *
  • Learn more in angular.io/guide/browser-support */

/***************************************************************************************************

  • BROWSER POLYFILLS */

/** IE9, IE10 and IE11 requires all of the following 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';

/** Issue with IE and FormData **/
import 'formdata-polyfill';

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

  • Web Animations @angular/platform-browser/animations
  • Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  • Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). / /* IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; import 'core-js/es7/array'; import 'core-js/es7/object';

import 'web-animations-js'; // Run npm install --save web-animations-js.
import 'core-js/client/shim';
/**

  • By default, zone.js will patch all possible macroTask and DomEvents
  • user can disable parts of macroTask/DomEvents patch by setting following flags
  • because those flags need to be set before zone.js being loaded, and webpack
  • will put import in the top of bundle, so user need to create a separate file
  • in this directory (for example: zone-flags.ts), and put the following flags
  • into that file, and then add the following code before importing zone.js.
  • import './zone-flags'; *
  • The flags allowed in zone-flags.ts are listed here. *
  • The following flags will work for all browsers. *
  • (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  • (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
  • (window as any).zone_symbolUNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames *
  • in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  • with the following flag, it will bypass zone.js patch for IE/Edge *
  • (window as any).Zone_enable_cross_context_check = true; * */ (window as any).Zone_enable_cross_context_check = true; /***************************************************************************************************
  • Zone JS is required by default for Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI.

/***************************************************************************************************

  • APPLICATION IMPORTS */

Also I have attached the IE11 Error page.

Thread Thread
 
katik1408 profile image
Kartik Saxena •

IE11Screenshot

Thread Thread
 
coly010 profile image
Colum Ferry •

Doesn't look like images attached. Can you message me on Twitter @FerryColum ?

Collapse
 
katik1408 profile image
Kartik Saxena •

I have also added the necessary Meta tag edited the tsconfig.js to target es5 edited browserlist pretty much everything.

Collapse
 
wescopeland profile image
Wes Copeland •

TIL IE11 support in Angular is a huge pain.

Now if we want to include a new dependency or library in our application, we need to make sure that it builds to and supports ES5, otherwise, we have to skip it. This could potentially limit our choices going forward, which is never ideal.

Without having looked into it much and knowing that ng eject is now nonviable, I wonder if @angular-builders/custom-webpack might be a gateway to having a webpack config that transpiles 3rd party libraries into es5 to fit this use case.

Collapse
 
coly010 profile image
Colum Ferry •

Funnily enough, I explored this option when I was trying to get the CSS Custom Properties to work.

I did not consider this for the dependencies. I'm sure there might be a Babel Plugin that might do this. It's worth the investigation.

Collapse
 
kovah profile image
Kevin Woblick •

I would state that Angular is not the best solution if you have to support IE 11 then. For whatever reason you still have to support IE11 (enterprise maybe?), using modern frameworks with it is never an ideal solution, so going back to something more easier would be probably the way to go then.

Collapse
 
coly010 profile image
Colum Ferry •

I'm actually going to disagree. It was still possible to support IE11, fully, despite the polyfills and ponyfills.

Knowing the limitations now allows us to move forward keeping these restrictions in mind, but Angular on its own is not to fault, and potentially shouldn't be overlooked just because IE11 has to be supported.

It also allows us to continue to develop in a modern environment, which keeps the option that if we ever no longer have to support IE11, due to changes in SLAs, then we can remove the polyfills and alter the target in the tsconfig compilerOptions to target a more modern version of ECMAScript.

Collapse
 
briancodes profile image
Brian •

I've worked on a few apps with Angular that support IE11, had no issues that were Angular specific. Also with Angular 8 there's differential loading which produces polyfill bundles for older browsers alongside smaller bundles for modern browsers (it's very clever!)

Collapse
 
coly010 profile image
Colum Ferry •

It is, I have a note in the article how it can increase bundle size if you allow it to run for IE9 and 10.

From what I've experienced though, was that dropping the target to es5 meant that your dependencies have to support es5.

I left a comment under one of the feedback to this article to state that it was very possible to support IE11, and in truth, Angular did not in itself have any issues, however, the additional tools you might use along with it will need extra work

Collapse
 
rakeshandrotula profile image
Rakesh Androtula • • Edited

I am getting the below error in IE11. I am using promise in App_initializer.
Can you please help.
https://www.google.com/url?sa=i&url=https%3A%2F%2Fcodepureandsimple.com%2Fpolyfilling-internet-explorer-11-a715c5b3c72&psig=AOvVaw3qAkJ2dlplBjbH95alGDN1&ust=1600592007830000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCODhwoPs9OsCFQAAAAAdAAAAABAJ