Angular < 13: How to support IE11

EDIT: FROM ANGULAR V13, IE11 CAN NO LONGER BE SUPPORTED. IF YOU NEED TO SUPPORT IE11, PLEASE USE A VERSION OF ANGULAR <13

In this article I will show you the steps I took to support Internet Explorer 11 with Angular. The first half of this will quickly show the steps you need to take, and the second half will break these steps down in more detail for anyone wishing to learn more. At the end I'll add some additional tips that may come up in a real-world application.

💪 Let's get it done

🎯 Step 1 - Targeting ES5

IE11 only supports at best ES5. Therefore we have to update our tsconfig.json.
Update the target property in compilerOptions to match the following, if not already:

"compilerOptions": {
    ...
    "target": "es5"
}

🌐 Step 2 - Update broswerlist

Open you browserlist file and change the line not IE 9-11 to match:

not IE 9-10
IE 11

🔧 Step 3 - Polyfills

If you or any of your dependencies use features from ES6+, you're going to need to polyfill those. CoreJS is included with Angular install, and can be used for the majority of the polyfills you require.

Open your polyfills.ts file and place the following at the top under BROWSER POLYFILLS:

If you need a quick win (NOT RECOMMENDED):

import 'core-js';

Otherwise, try to discern what polyfills you need. I found that these covered my use-case:

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/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/array';
import 'core-js/es7/array'; // for .includes()

The next part we need to do is to find the following lines, near the top of polyfills.ts:

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

As instructed run:
npm install --save classlist.js

and then uncomment the import:

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

If you use Angular Material or the AnimationBuilder from @angular/platform-browser/animations then find the following line:

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

Uncomment it and run npm install --save web-animations-js.

Your final polyfills.ts file should look similar to:

/**
 * 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 https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER 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/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/array';
import 'core-js/es7/array'; // for .includes()

/** 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).
 */
import 'web-animations-js'; // Run `npm install --save web-animations-js`.

/**
 * 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.ts';
 *
 * 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_symbol__BLACK_LISTED_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;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone'; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

✅ Completed

And that's it! You should be good to go! 🚀🚀

You may well run into further issues. Some of these will now be discussed in the second half of this article.

🤯 But why?

Let's go quickly go through the why's of each step above before we go into some further tips on additional problems that may arise.

• Target ES5: Pretty straightforward, IE11 only supports ES5 or lower. Therefore, TypeScript needs to Transpile your code to ES5 compatible code.
• Browserlist: This is an interesting one. We need to say we are supporting IE 11, but if we are not supporting IE 9 or 10, it's equally important to specifically say we aren't supporting them, otherwise the differential loader will include a lot of guff. (Thanks @wescopeland_ for that advice)
• Polyfills - Some of the libraries we work with, or code we write, relies on features from versions of ECMAScript that IE11 doesn't support, therefore we need to provide this functionality to ES5 manually using workarounds. This will allow the code using modern features to continue to work correctly. (Note: Each polyfill will increase the bundle size, so be careful when choosing which polyfills to import)

💡 Some additional tips

Ok, so the motivation to write this article came from being tasked to support IE11 in our green-field app. It was particularly painful as it was an afterthought that then highlighted compatibilities issues with supporting IE11:

Third-party dependencies need to support ES5

This became evident quickly as the errors were easily spit out into the console. But it did highlight an interesting problem.

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.

IE11 doesn't support CSS Custom Properties

This became hell quickly. IE11 doesn't support CSS Custom Properties such as --primary-color: blue; which meant our theming solution was potentially on the ropes.

After a lot of investigation, I found that it could be polyfilled, however, the polyfills that I found were slow, had a huge impact on the bundle size and not entirely perfect. missing features such as multiple Custom Properties in one line among other issues.

They also didn't work for our particular use-case and our theming solution which relied on runtime setting of the Custom Properties.

My solution to this came from the css-vars-ponyfill that allowed the setting of global Custom Properties at runtime. Awesome 🔥🔥

Setting the style attribute in IE11

IE11 will only allow the setting of a DOM Element's style attribute with CSS Properties it supports.
For example, doing the following:

document.body.style = '--primary-color: blue; font-size: 18px';

results in the following on IE11, losing the --primary-color: blue.

<body style="font-size: 18px"></body>

Styling issues arising from flexbox support

IE11 does support flexbox, but it's very picky about how it does so. I noticed that if I wanted to use flex: 1; to allow an element to fill the remaining space, on IE11 I had to set the full flex property: flex: 1 0 auto; or something similar.

Running DevTools in IE11 conflicts with zone.js

Yep. For some reason, when you open dev tools whilst having ng serve running on IE11 causes conflicts with zone.js;

To fix this you need to add a global ZONE FLAG for zone to execute slightly additional code.

You do this in polyfills.ts. Find the zone.js import and add the following so it looks like this:

(window as any).__Zone_enable_cross_context_check = true;
import 'zone.js/dist/zone'; // Included with Angular CLI.

😭 Conclusion

I did not have fun trying to get this to work during the week. Now that I have it supported; I feel pretty accomplished 💪.
I hope this article can save someone some pain in the future!

Hopefully you have gained something from reading this article, maybe a tidbit you didn't know before.

If you have any questions, feel free to ask below or reach out to me on Twitter: @FerryColum.