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...
For further actions, you may consider blocking this person and/or reporting abuse
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
ases2015
, Angular 8 will produce two builds, one for modernes2015
browsers and one for olderes5
browsers. It then uses differential loading to deliver thees5
build only to legacy browsers that need it. Thees5
build will include thecore-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 alles5
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...
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!
Hmmm. Ok, that is good to know - I won't skip the practical browser testing then!
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
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?
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?
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.
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';
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!
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)
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?
Can you give more info about what's happening, like the error that's being outputted? I would love to help you 😀
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?
Even after following the steps above I am unable to run my angular 8 app in IE11 (V 11.7x).
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"
Thanks Paula, you saved my life! :D
npm i svg4everybody