DEV Community

loading...

Angular 8 and IE 11

paulinhapenedo profile image Paula Penedo (she/her) ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

2. polyfills.ts

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

3. browserslist

 # the default configuration
 not IE 9-11

 # the change - remove the "not"
 IE 9-11
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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

Discussion (16)

pic
Editor guide
Collapse
_builtbyjay profile image
Jay Vincent • 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...

Collapse
paulinhapenedo profile image
Paula Penedo (she/her) Author

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!

Collapse
_builtbyjay profile image
Jay Vincent

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

Thread Thread
jaredconover profile image
J.Conover

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

Collapse
rodrigoga profile image
Rodrigo • 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:

"ERROR" Error: Uncaught (in promise): Error: The animation trigger "transform" has failed to build due to the following errors:
The provided animation property "box-shadow" is not a supported CSS property for animations
.zUnb/_glocalhost:4200/main.d8f0e27e57edd5...
.zUnb/Vglocalhost:4200/main.d8f0e27e57edd5...
.zUnb/Vglocalhost:4200/main.d8f0e27e57edd5...
Ma@localhost:4200/main.d8f0e27e57edd5...
Ca@localhost:4200/main.d8f0e27e57edd5...
Ra@localhost:4200/main.d8f0e27e57edd5...
Ia@localhost:4200/main.d8f0e27e57edd5...
Ca@localhost:4200/main.d8f0e27e57edd5...
ka@localhost:4200/main.d8f0e27e57edd5...
Va@localhost:4200/main.d8f0e27e57edd5...
.zUnb/Brlocalhost:4200/main.d…
Stack trace:
D@localhost:4200/polyfills-es5.0fe32...
D@localhost:4200/polyfills-es5.0fe32...
N/localhost:4200/polyfills-es5.0fe32...
["0TWp"]/localhost:4200/polyfills-es5.0fe32...
@localhost:4200/main.d8f0e27e57edd5...
["0TWp"]/localhost:4200/polyfills-es5.0fe32...
["0TWp"]/localhost:4200/polyfills-es5.0fe32...
v@localhost:4200/polyfills-es5.0fe32...
["5s+n"]/X/localhost:4200/polyfills-es5.0fe32...
.tXUg/n@localhost:4200/polyfills-es5.0fe32...

Do you have any idea what might be happening?

Collapse
paulinhapenedo profile image
Paula Penedo (she/her) Author

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?

Collapse
rodrigoga profile image
Rodrigo

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.

Collapse
vijhhh2 profile image
Vijay

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

Collapse
paulinhapenedo profile image
Paula Penedo (she/her) Author

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!

Collapse
alexeyromanchenko profile image
AlexeyRomanchenko • 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)

Collapse
kannanpsibertech profile image
kannan-psibertech

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?

Collapse
paulinhapenedo profile image
Paula Penedo (she/her) Author

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

Collapse
kannanpsibertech profile image
kannan-psibertech

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?

Collapse
pradeeppathak22 profile image
Pradeep Pathak

Even after following the steps above I am unable to run my angular 8 app in IE11 (V 11.7x).

  1. Changed in tsconfig.json file : "target": "ES5",
  2. My polyfills.ts

import 'classlist.js';
import 'core-js';
import 'web-animations-js';

After making these changes and running the app I am getting following error:
"Unable to get property 'includes' of undefined or null reference"

Collapse
hashmune profile image
hashmune

Thanks Paula, you saved my life! :D

Collapse
scmhtetaung profile image
scm.htetaung

npm i svg4everybody