Angular 2 / 4 / 5 not working in IE11

190,893

Solution 1

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.

Solution 2

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

Solution 3

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

Solution 4

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

Solution 5

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

View more solutions

190,893

Author by

Pat Bone Crusher Laplante

Updated on September 14, 2020

Comments

Pat Bone Crusher Laplante over 3 years

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!

Ceylan Mumun Kocabaş about 8 years

this solution didn't work for me :( ... [on VS2015 project running on IE]
Zze about 7 years

This answer is very missleading. The polyfills are the scripts which make IE 9 and above compatible with ES6 standards as seen here: 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.
MikeDub about 7 years

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.
Zze about 7 years

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.
gh0st over 6 years

Furthermore, I'm already targetting es5 in my tsconfig and I still have issues.
Prasanna about 6 years

@MikeDub I tried using your solution but it is not working for IE11. Can you provide me better approach.
Poly about 6 years

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: stackoverflow.com/a/47777695/4628364
Abby almost 6 years

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....
Vaibhav almost 6 years

Uncomment all the imports mentioned as well as import NgClass below that. Finally install " npm install --save classlist.js " . This worked in my case.
dudewad almost 6 years

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.
Zze almost 6 years

@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.
dudewad almost 6 years

@Zze well, that's certainly thorough of you. Nice, I like that.
Junior Mayhé over 5 years

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)
Kyle Vassella over 5 years

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.
bmcminn over 5 years

@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.
Zze over 5 years

@bmcminn hence the past tense ;)
lucifer63 over 5 years

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.
Chris over 5 years

You can segregate IE polyfills so they don't load in other browsers as described here: izifortune.com/angular-polyfill-strategies
Hassan Faghihi almost 5 years

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 :|
Menna Ramadan over 4 years

I have already thses 2 parts uncommented but it is still not working, do you have another solution
AtLeastTheresToast over 4 years

This is great. Thank you.
gaurav oberoi over 4 years

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.
Lubiluk over 4 years

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 over 4 years

Considering information from this SO stackoverflow.com/questions/26346917/…, recommendation to use X-UA-Compatible seems to be invalid.
Ajarudin Gunga over 4 years

this fix working for normal build ng build but in prod build not working ng build --prod
UI_Dev over 3 years

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/