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   lt  DOCTYPE html gt   lt html gt     lt head gt       lt script gt document write   lt base href      document location        gt     lt  script gt       lt title gt Router Sample lt  title gt       lt link rel  stylesheet  href  style css  gt       lt script src  https   cdnjs cloudflare com ajax libs es6-shim 0 34 2 es6-shim min js  gt  lt  script gt       lt script src  https   code angularjs org 2 0 0-beta 1 angular2-polyfills js  gt  lt  script gt       lt script src  https   code angularjs org tools system js  gt  lt  script gt       lt script src  https   code angularjs org tools typescript js  gt  lt  script gt       lt script src  https   code angularjs org 2 0 0-beta 1 Rx js  gt  lt  script gt       lt script src  https   code angularjs org 2 0 0-beta 1 angular2 dev js  gt  lt  script gt       lt script src  https   code angularjs org 2 0 0-beta 1 http dev js  gt  lt  script gt       lt script gt        System config           transpiler   typescript            typescriptOptions    emitDecoratorMetadata  true             packages    src    defaultExtension   ts                     System import  src boot                then null  console error bind console         lt  script gt     lt  head gt      lt body gt       lt my-app gt loading    lt  my-app gt     lt  body gt    lt  html gt    Anybody got any idea as to why IE 11 fails to run the angular 2 app   Thank you

User · Answer

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/[email protected] 
 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';

User · Answer

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

User · Answer

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     lt meta http-equiv  X-UA-Compatible  content  IE edge    gt

User · Answer

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  quot target quot    quot es2015 quot  to  quot target quot    quot es5 quot  These steps fixed my issue

User · Answer

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   gt  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

User · Answer

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

User · Answer

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   lt meta http-equiv  X-UA-Compatible  content  IE edge    gt   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

User · Answer

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

User · Answer

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

User · Answer

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    lt meta http-equiv  X-UA-Compatible  content  IE edge    gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I had the exact same issue and none of the solutions worked for me  Instead adding the following line in the  homepage  html under  lt head gt  fixed it     lt meta http-equiv  X-UA-Compatible  content  IE edge    gt

User · Answer

For me with iexplorer 11 and Angular 2 I fixed all those above issues by doing 2 things   in index html add    lt meta http-equiv  X-UA-Compatible  content  IE edge    gt    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

User · Answer

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

User · Answer

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

User · Answer

changing tsconfig json      target   es5     solved my problem

User · Answer

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    lt script src  node modules angular2 es6 dev src testing shims for IE js  gt  lt  script gt    This resolved the problem for me   For more details  you can follow the github issue here  https   github com angular angular issues 7144

User · Answer

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      gt     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

User · Answer

Un-comment some imports in the polyfill ts file     x000D   x000D      IE9  IE10 and IE11 requires all of the following polyfills      x000D  import  core-js es6 symbol   x000D  import  core-js es6 object   x000D  import  core-js es6 function   x000D  import  core-js es6 parse-int   x000D  import  core-js es6 parse-float   x000D  import  core-js es6 number   x000D  import  core-js es6 math   x000D  import  core-js es6 string   x000D  import  core-js es6 date   x000D  import  core-js es6 array   x000D  import  core-js es6 regexp   x000D  import  core-js es6 map   x000D  import  core-js es6 weak-map   x000D  import  core-js es6 set   x000D   x000D   x000D    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

User · Answer

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

[angular] Angular 2 / 4 / 5 not working in IE11

Examples related to angular

Examples related to typescript

Examples related to internet-explorer