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

In polyfills.ts

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/es7/array';

import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

Answer 2

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

Answer 3

As of September 2017 (node version=v6.11.3, npm version=3.10.10), this is what worked for me (thanks @Zze):

Edit polyfills.ts and uncomment the imports that are necessary for IE11.

More preciselly, edit polyfills.ts (located in the src folder by default) and just uncomment all lines required for IE11 (the comments inside the file explain exactly what imports are necessary to run on IE11).

A small warning: pay attention when uncommenting the lines for classlist.js and web-animations-js. These commented lines have a specific comment each: you must run the associated npm commands before uncommenting them or processing of polyfills.ts will break.

As a word of explanation, the polyfills are pieces of code that implement a feature on a web browser that do not support it. This is why in the default polyfills.ts configuration only a minimal set of imports is active (because it's aiming the so-called "evergreen" browsers; the last versions of browsers that automatically update themselves).

Answer 4

1. Uncomment IE section in the src/polyfill.js,

   /** IE10 and IE11 requires the following for NgClass support on SVG elements*/

   import 'classlist.js';

2. If any build error for missing package then,

   npm install classlist.js --save-exact

3. Make sure to include below line to set the default IE document mode. Other wise it will open in version 7

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

Answer 5

What worked for me is I followed the following steps to improve my application perfomance in IE 11 1.) In Index.html file, add the following CDN's

<script src="https://npmcdn.com/angular2@2.0.0- 
 beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

2.) In polyfills.ts file and add the following import:

import 'core-js/client/shim';

Answer 6

I tried every solution in this thread as well as bunch from other ones, with no success. What ended up fixing this for me was to update every package in my project, including MAJOR version changes. So:

1. Run npm outdated
2. Update package.json with the number shown in the current column from results (this can break your project, be careful)
3. Run npm install
4. Made sure I also had the polyfills uncommented as noted in the other answers.

That's it. I wish I could pinpoint which library was the culprit. The actual error I was getting was "Syntax Error" in vendor.js in Angular 6.