Angular: How to support IE11

Colum Ferry
Jan 10 · 5 min read

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 the import statement and run npm install --save web-animations-js.

Your final polyfills.ts file should look similar to:

✅ 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.

Originally published at https://dev.to on January 10, 2020.

JavaScript in Plain English

Learn the web's most important programming language.

Colum Ferry

Written by

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.1K

More from JavaScript in Plain English

More from JavaScript in Plain English

How Single Page Applications Broke Web Design

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade