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, posted by someone on stack overflow, on both chrome and IE 11. Works fine on Chrome, but fails on IE 11. Same error, stuck on saying "Loading..."

The plunker is : https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Router Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

Anybody got any idea as to why IE 11 fails to run the angular 2 app?

Thank you!

Answer is to use 2.0.0-beta.0 for now. – Pat Bone Crusher Laplante Feb 01 '16 at 22:04 — Pat Bone Crusher Laplante, Feb 01 '16 at 22:04

score 190 · Answer 1 · edited Aug 24 '18 at 09:08

190

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.

edited Aug 24 '18 at 09:08

jithinkmatthew

890
8
17

answered Feb 23 '17 at 21:26

Zze

18,229
13
85
118

3

My angular 5 project also has the same error even I have uncommented the polyfill for IE, still cannot work in IE browser. Too strange.... – Abby Jun 13 '18 at 06:34
Uncomment all the imports mentioned as well as import NgClass below that. Finally install " npm install --save classlist.js " . This worked in my case. – Vaibhav Jul 30 '18 at 19:33
Re: notes Well, yeah. Polyfills are added code to a project when trying to support the potential of a browser that doesn't support a specific functionality. You're not going to have that polyfill code magically disappear from your package when downloading the bundle via chrome; the application bundle is the application bundle is the application bundle. – dudewad Aug 02 '18 at 16:37
3

@dudewad I was experimenting with creating 2 separate bundles, one explicitly for IE11, and then wrapping that bundle in an IE conditional comment which would've stopped it coming through in chrome. – Zze Aug 11 '18 at 00:29
1

@Zze well, that's certainly thorough of you. Nice, I like that. – dudewad Aug 13 '18 at 00:09
1

@Zze conditional comments were removed in IE10, they're only supported in IE5-9. So your IE bundle wouldn't be loaded for IE10+, unless you specifically did some user agent sniffing to add your bundle to the page at runtime. – bmcminn Oct 16 '18 at 21:35
@bmcminn hence the past tense ;) – Zze Oct 16 '18 at 21:58
You can segregate IE polyfills so they don't load in other browsers as described here: https://izifortune.com/angular-polyfill-strategies/ – Chris Dec 29 '18 at 18:45
so i don't need to look for it in version 7? it's my nth time searching for this, and no one said a word :| – Hassan Faghihi Jul 13 '19 at 06:12
these imports are not present in my polyfill.js. if i add these imports to the polyfill.js file, it throws error. Please mention all commands i need to add for this. – gaurav oberoi Jan 03 '20 at 09:54
I think it's worth adding that when using `target: "es5"` you still may need some additional polyfills (e.g. array.includes). Importing `import 'core-js/shim'` will fix that. Also for fixing CSS on IE there is a file `browserslist`. – Lubiluk Jan 06 '20 at 10:12
this fix working for normal build `ng build` but in prod build not working `ng build --prod` – Ajarudin Gunga Jan 29 '20 at 16:33
After Migrated to Angular8+ or 9 or 10, core-js/es6 or core-js/es7 Will not work. You have to simply replace import core-js/es/ – UI_Dev Sep 10 '20 at 05:04

Alex W. · Answer 2 · 2017-12-12T17:04:53.223

23

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

edited Dec 12 '17 at 17:04

answered Dec 12 '17 at 16:51

Alex W.

546
1
7
22

Considering information from this SO https://stackoverflow.com/questions/26346917/why-use-x-ua-compatible-ie-edge-anymore, recommendation to use X-UA-Compatible seems to be invalid. – Lubiluk Jan 06 '20 at 10:13

score 20 · Answer 3 · answered Feb 18 '16 at 15:48

20

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

answered Feb 18 '16 at 15:48

Ashley Grenon

9,305
4
41
54

3

this solution didn't work for me :( ... [on VS2015 project running on IE] – Ceylan Mumun Kocabaş Apr 26 '16 at 15:32

score 12 · Answer 4 · edited May 23 '17 at 11:47

12

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

edited May 23 '17 at 11:47

Community

1
1

answered Feb 24 '17 at 01:45

MikeDub

5,143
3
27
44

This answer is very missleading. The polyfills are the scripts which make IE 9 and above compatible with ES6 standards as seen here: https://angular.io/docs/ts/latest/guide/browser-support.html So it doesn't matter if the browser natively supports arrow functions, the polyfills mitigates this issue entirely. – Zze Feb 27 '17 at 22:09
8

How is what I experienced in my case...misleading? The polyfills were already uncommented and they did not fix the issue that I was experiencing in IE11. Hardly think this is worthy of a downvote. – MikeDub Feb 27 '17 at 23:15
After re-reading this, I understand what you are trying to say, but the way in which it is currently worded, it sounds like you have to manually change all of your `.ts` files from using fat arrow to anon funcs. I think that you should snip a quote out of that link about how the compiler output is different if you change the ecma script target which henceforth mitigates the issue. – Zze Feb 27 '17 at 23:27
5

Furthermore, I'm already targetting es5 in my tsconfig and I still have issues. – gh0st Oct 02 '17 at 17:19
1

@MikeDub I tried using your solution but it is not working for IE11. Can you provide me better approach. – Prasanna Mar 13 '18 at 13:25

score 11 · Answer 5 · answered Jan 19 '18 at 11:53

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

This is great. Thank you. – AtLeastTheresToast Oct 02 '19 at 15:56 — AtLeastTheresToast, Oct 02 '19 at 15:56

Belen Martin · Answer 6 · 2018-05-21T07:27:02.337

10

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

edited May 21 '18 at 07:27

answered May 18 '18 at 10:22

Belen Martin

507
5
7

1

Yes this is working for IE11 but not for IE10: `ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)` – Junior Mayhé Aug 29 '18 at 20:29

score 10 · Answer 7 · answered Jan 28 '19 at 10:49

Un-comment some imports in the polyfill.ts file.

/** 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 :)

Shotgun Ninja · Answer 8 · 2018-05-15T20:06:02.203

9

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.

edited May 15 '18 at 20:06

answered Oct 06 '17 at 17:09

Shotgun Ninja

2,540
3
26
32

1

If you follow this solution you have to do this on all the client running your application. Adding a special tag to your html file forces the browser to run in the latest version available instead of compatibility mode. Refer to the following answer to find the tag: https://stackoverflow.com/a/47777695/4628364 – Poly May 14 '18 at 08:54
2

In my experience, if your app is served on an intranet host, the use of this meta tag does not override IE 11's default setting to 'Display Intranet sites in Compatibility View`. Users of the intranet app will still need to go in and manually uncheck this option which is less than ideal. I'm currently looking for a workaround - perhaps compiling to ES5 rather than ES6. – Kyle Vassella Oct 01 '18 at 16:15

score 8 · Answer 9 · answered Sep 20 '17 at 12:19

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

score 6 · Answer 10 · answered Jan 20 '19 at 14:50

I have an Angular4 application, even for me also it was not working in IE11 browser, i have done below changes, now its working correctly. Just add below code in the index.html file

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

Just you need to uncomment these below lines from polyfills.ts file

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

These above 2 steps will solve your problem, please let me know if anything will be there. Thanks!!!

I have already thses 2 parts uncommented but it is still not working, do you have another solution — Menna Ramadan, Sep 19 '19 at 06:25

score 5 · Answer 11 · answered Oct 11 '18 at 12:20

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'

score 4 · Answer 12 · answered Jun 18 '18 at 19:26

4

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

answered Jun 18 '18 at 19:26

Ivan Lopez

87
8

score 3 · Answer 13 · edited Sep 07 '18 at 20:02

3

changing tsconfig.json

"target":"es5",

solved my problem

edited Sep 07 '18 at 20:02

georgeawg

48,608
13
72
95

answered Sep 07 '18 at 19:41

user3050538

89
1
9

score 2 · Answer 14 · answered May 22 '18 at 11:01

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

score 2 · Answer 15 · answered Jun 06 '18 at 19:45

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

score 2 · Answer 16 · answered Nov 12 '18 at 08:39

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.

Many thanks for your response. While it didn't solve the problem, it though helped me to find the troublemaker module and inform it's author about the trouble. — lucifer63, Dec 05 '18 at 12:16

score 2 · Answer 17 · answered Nov 01 '19 at 16:48

How to resolve this problem in Angular8

polyfills.ts uncomment import 'classlist.js'; and import 'web-animations-js'; then install two dependency using npm install --save classlist.js and npm install --save web-animations-js.

update tsconfig.json with "target":"es5",

then ng serve run the application and open in IE, it will work

score 1 · Answer 18 · answered Dec 31 '19 at 08:36

Uncomment IE section in the src/polyfill.js,

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

import 'classlist.js';
If any build error for missing package then,

npm install classlist.js --save-exact
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" />

score 1 · Answer 19 · answered Sep 14 '20 at 09:45

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

score 0 · Answer 20 · answered Feb 01 '19 at 16:10

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:

Run npm outdated
Update package.json with the number shown in the current column from results (this can break your project, be careful)
Run npm install
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.

score 0 · Answer 21 · answered May 18 '20 at 13:39

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.

score 0 · Answer 22 · answered Sep 11 '20 at 17:16

The latest version of core-js lib provides the polyfills from a different path. so use the following in the polyfills.js. And also change the target value to es5 in the tsconfig.base.json

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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';

Angular 2 / 4 / 5 not working in IE11

22 Answers22

Notes

Linked

Related