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

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)

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)

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)

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