DEV Community

Angular 8 and IE 11

Paula Penedo (she/her) on August 29, 2019

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

Read full post

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?