Paula Penedo (she/her)

Posted on Aug 29, 2019

Angular 8 and IE 11

#angular #ie11

It's a funny thing that my first post on Dev.to will be about Angular, a framework that I have close to zero experience.

I've switched careers early 2010, after a few years working with advertising and marketing, so I didn't catch the breaking change on the web development world with the rise of frameworks like Backbone and Angular. My first job working with the web was all about WordPress themes and the beloved jQuery (which I really miss).

Anyway, sorry for the little detour and onto what really matters! On the previous versions of Angular, we had to install core-js and import a bunch of its features/helpers, making your polyfill.ts look like this:

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

Angular 8 comes with core-js installed by default. It will be added to our bundle only if we tell Angular to do that.

How do we do that?

1. `tsConfig.json`

 // the default configuration
 "target": "es2015"

 // the change
 "target": "es5"

2. `polyfills.ts`

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

3. `browserslist`

 # the default configuration
 not IE 9-11

 # the change - remove the "not"
 IE 9-11

Bonus tip

If you are going to use SVGs sprites and the tag <use>, IE 11 will complain about it too. Luckily there's a lib to solve that, the amazing svg4everybody. Add it to your polyfills.ts:

/** IE10 and IE11 requires the following for external source of SVG when using <use> tag */
import * as svg4everybody from 'svg4everybody';
svg4everybody({ polyfill: true });

Feel free to drop a comment if you have any other tips and strategies for developers working with Angular 8!

Top comments (16)

Jay Vincent • Dec 6 '19 • Edited

Hi Paula :) Thanks for the article, very timely as I've been upgrading an Angular 5 application to Angular 8 today!

My understanding is that if you leave the target as es2015, Angular 8 will produce two builds, one for modern es2015 browsers and one for older es5 browsers. It then uses differential loading to deliver the es5 build only to legacy browsers that need it. The es5 build will include the core-js polyfills by default.

I haven't tested this but I assume (always dangerous to assume..!) that changing the tsconfig target property to es5 will disable differential loading and bundle all es5 polyfills into a single build, to be downloaded by all browsers regardless of capability.

I've been reading about here -> blog.angular.io/version-8-of-angul...

Paula Penedo (she/her) • Dec 8 '19

I thought the same when developing the app, but from my experience, that wasn't working as expected. Maybe it's something on my app, but when I tried to run it on IE 11 using browserstack, I would always get an error.

Hope you have a better experience than I had. And good luck with the upgrade!

Jay Vincent • Dec 8 '19

Hmmm. Ok, that is good to know - I won't skip the practical browser testing then!

J.Conover • Dec 19 '19

I made my app run in IE 11 without changing the target:
I did everything above except for changing the target in tsConfig.json
however, I also installed and decommented web-animations-js in polyfill.ts:
import 'web-animations-js'; // Run npm install --save web-animations-js.

I believe this part is missing from the article

Rodrigo • Dec 5 '19 • Edited

I'm trying to follow your tutorial, for a simple app that uses the angular material library

In browserlist I added Firefox> = 22

I added the following polyfills
import 'classlist.js';
import 'intl';
import 'web-animations-js';
import 'typedarray';
import 'blob';
import * as svg4everybody from 'svg4everybody';
svg4everybody({ polyfill: true });

but I receive the following error, even in firefox 33:

Do you have any idea what might be happening?

Paula Penedo (she/her) • Dec 8 '19

Hey Rodrigo, I'm sorry but I have no clue to what could be causing this error. Are you using Angular animations or the plain animation from CSS?

Rodrigo • Dec 8 '19

Thank you very much for your time.
In app.module I added NoopAnimationsModule instead of BrowserAnimationsModule, but the error still happens.
Apparently the error is the component mat-sidenav-container of material angular because without it everything works.

Do you have any suggestion? Thank you so much for your article.

Vijay • Nov 12 '19

small correction in your code. For the latest angular imports are as below.
import 'core-js/es/symbol';
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';

Paula Penedo (she/her) • Nov 13 '19

Thanks for the comment! On the project that I'm working on, it seems to work using es6, but I'll try to update to your code.

Thanks again!

AlexeyRomanchenko • Jan 17 '20 • Edited

I've founded decision to this problem in IE 11.0.96 with adding
import 'hammerjs';
in polyfills.ts (Also after adding all these manipulations from tha post)

kannan-psibertech • Dec 3 '19

In IE 11.4 working(just es5 configuration is enough) but IE 11.0.9 not working (followed all your steps)....am using angular 8...any solution?

Paula Penedo (she/her) • Dec 3 '19

Can you give more info about what's happening, like the error that's being outputted? I would love to help you 😀

kannan-psibertech • Dec 4 '19

hi..thanks for your reply...angular application is not loading in IE 11.0.96...no error in console...but in ie 11.4(my laptop) is loading....i just tried simple hello world application also but its not loading in ie 11.0.96....one of the customer have ie 11.0.96 only....what to do?