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

If none of the other solutions work for you, it's worth investigating the source of the problem. It may be than an npm module directly inserts ES6 code, which cannot be transpiled.

In my case I had the

SCRIPT1002: Syntax error vendor.js (114536,27) at the following line:

const ucs2encode = array => String.fromCodePoint(...array);

I searched the node_modules folder and found from which file the line came. It turned out that the culprit was punycode.js which in it's 2.1.0 version uses ES6 directly.

After I downgraded it to 1.4.1, which uses ES5, the problem was solved.

Answer 2

I was having the same issue, if you have enabled Display intranet sites in Compatibility View the polyfills.ts won't work, you still need to add the following line as has been told.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 3

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

Answer 4

EDIT 2018/05/15: This can be achieved with a meta tag; please add that tag to your index.html and disregard this post.

This is not a complete answer to the question (for the technical answer please refer to @Zze's answer above), but there's an important step that needs to be added:

COMPATIBILITY MODE

Even with the appropriate polyfills in place, there are still issues with running Angular 2+ apps using the polyfills on IE11. If you are running the site off an intranet host (ie. if you are testing it at http://localhost or another mapped local domain name), you must go into Compatibility View settings and uncheck "Display intranet sites in Compatibility View", since IE11's Compatibility View breaks a couple of the conventions included in the ES5 polyfills for Angular.