Angular 2 / 4 / 5 not working in IE11

Question

I am trying to figure out why my angular 2 app is stuck on showing Loading... when running in IE 11.

Following someone\'s suggestion, I\'ve tried this plunker, poste

Answer 1

changing tsconfig.json

"target":"es5",

solved my problem

Answer 2

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",

Answer 3

If you have still problems that not all JavaScript functions are working add this line in your polyfills. It fixes the missing ‘values’ method:

import 'core-js/es7/object';

And this line fixes the missing ‘includes’ method:

import 'core-js/es7/array'

Answer 4

Step 1: Un-comment plyfills in polyfills.ts. Also run all npm install commands mentioned in in polyfills.ts file to install those packages

Step 2: In browserslist file remove not before the line where IE 9-11 support is mentioned

Step 3: In tsconfig.json file change like "target": "es2015" to "target": "es5"

These steps fixed my issue

Answer 5

Angular 9 out of the box should work absolutely fine in IE11 now.

I tried all of the suggestions listed here and none of them worked. However I did manage to track it down to a specific library I was importing in app.module (ZXingScannerModule to be precise). If your app is failing in IE11 on the first page, try removing libraries one at a time and check in IE11 - it was completely missed in all my build warning errors. If you do find this is the case, then consider compartmentalising the area of your site which uses this library as a lazy loaded module.

Answer 6

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

---

This means that you manually have to enable the correct polyfills to get Angular working in IE11 and below.

---

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.

---

Notes

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