Angular2 IE11-Browser Support

Question

My Dilemma is I am not able to view my Angular2 App on IE 11 but the same app is working fine on chrome: You can see the snapshots:

This is on Chrome:

This is on IE browser:

What possibly I am doing wrong, I even Added all the possible libraries in my html page for IE compatibility:

Here are the libraries:

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

  <script src="node_modules/es6-shim/es6-shim.js"></script>

    <!-- 1. Load libraries -->
     <!-- Polyfill for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
      <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>

PS: There are no errors on console also.

Any help Appreciated,

Thanks in advance

Now it is giving me another error on IE :

Error Scenario:

@ChiranjeeviIT Can u clarify how can i check source files are loaded into browser or not ?? — , Mar 03 '17 at 05:13
at the debug-network window,you can see whether your source files are loaded successfully.also try to use all sourcefiles at your local environment. — Pengyy, Mar 03 '17 at 05:27
@Pengyy I checked and guess so everything seems fine to me .... — , Mar 03 '17 at 05:52
Now it is giving me another error I edited my post and added snapshot of that error. — , Mar 03 '17 at 06:21
@eddie can you expand the object error? and give it to us. it's difficult to see the error with this screen shot. — ChiranjeeviIT, Mar 03 '17 at 06:55
@ChiranjeeviIT I added two another snapshot u asked for, can you look into it please?? — , Mar 03 '17 at 07:21

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

As per warnings in your screen shots, you have issue with CORS(Cross origin resource sharing). Possible solutions would be

1) If possible, Try downloading sources and add them into your sources (rather than using third party links)

2) Try to have headers for ""Access-Control-Allow-Origin" for more information you can see below links CORS IN IE

For more information about your issue see below screen shot!

Hope it helps.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 07 '17 at 05:23

ChiranjeeviIT

529
1
4
17

@ChiranjeevilT I tried the two things you told in above post, still its not working, for the update CORS warning are disappear and no error on console and also I downloaded the sources and used them locally still my app is not working. – Mar 08 '17 at 14:34

score 0 · Accepted Answer · answered Mar 21 '17 at 12:51

After digging deep, I finally tried one thing lastly, I updated the version of my angular , as I was using angular beta version previously and also updated version of typescript. Finally My Angular App was compatible with IE Browser. Phew...!!!

score 0 · Answer 3 · answered Jun 19 '18 at 14:18

0

Besides polyfills and shims you might also need to force compatibility mode off: see https://stackoverflow.com/a/47777695/232542

answered Jun 19 '18 at 14:18

sibidiba

6,270
7
40
50

Angular2 IE11-Browser Support

3 Answers3