Menu
There can be numerous reasons why your Angular application is not working, including: Missing polyfills in polyfills. ts . Using a TypeScript target version which IE11 does not support.
There are two ways you can support IE 11 with Angular 12 as you prepare to migrate to Angular 13: Update tsconfig. json to use ES5 and update polyfills. ts for ES6/ES7.
The latest version of angular is only setup for evergreen browsers by default...
The current setup is for so-called "evergreen" browsers; the last versions of browsers that automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
This also includes firefox, although not mentioned.
See here for more information on browser support along with a list of suggested polyfills for specific browsers. https://angular.io/guide/browser-support#polyfill-libs
To achieve this, go into polyfills.ts (in the src folder by default) and just uncomment the following imports:
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** 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';
import 'core-js/es6/set';
Note that the comment is literally in the file, so this is easy to find.
If you are still having issues, you can downgrade the target property to es5 in tsconfig.json as @MikeDub suggested. What this does is change the compilation output of any es6 definitions to es5 definitions. For example, fat arrow functions (()=>{}) will be compiled to anonymous functions (function(){}). You can find a list of es6 supported browsers here.
• I was asked in the comments by @jackOfAll whether IE11 polyfills are loaded even if the user is in an evergreen browser which doesn't need them. The answer is, yes they are! The inclusion of the IE11 polyfills will take your polyfill file from ~162KB to ~258KB as of Aug 8 '17. I have invested in trying to solve this however it does not seem possible at this time.
• If you are getting errors in IE10 and below, go into you package.json and downgrade webpack-dev-server to 2.7.1 specifically. Versions higher than this no longer support "older" IE versions.
I had the exact same issue and none of the solutions worked for me. Instead adding the following line in the (homepage).html under <head> fixed it.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I ran into this issue today. I found an solution on GitHub that does not require going to a later version of the beta.
Add the following script to your html:
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
This resolved the problem for me. For more details, you can follow the github issue here: https://github.com/angular/angular/issues/7144
As of Feb 2017
Using an Angular-Cli project, all lines in the polyfills.ts file were already uncommented so all polyfills were already being utilised.
I found this solution here to fix my issue.
To summarize the above link, IE doesn't support lambda arrow / fat arrow functions which are a feature of es6. (This is if polyfills.ts doesn't work for you).
Solution: you need to target es5 for it to run in any IE versions, support for this was only introduced in the new Edge Browser by Microsoft.
This is found under src/tsconfig.json:
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
You'll need to adjust the polyfills.ts file for your target browsers by uncommenting the appropriate sections.
/** 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';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
For me with iexplorer 11 and Angular 2 I fixed all those above issues by doing 2 things:
in index.html add:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
in src\polyfills.ts uncomment:
/** 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';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** 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';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';Install npm Pacakages Notice there are some npm install commands in the comments. If you are using an early version of Angular CLI, there may also be a third one. For Angular CLI versions 7, 6, and 1.7 you need to run:
npm install --save classlist.js
npm install --save web-animations-js
now open IE and render your application and check :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With