Angular 6 for IE11 resulting in blank window

Question

So I have some issue with a project I'm working on--everything runs fine, except I'm trying to uncomment the import statements in the polyfill.ts for IE9, 10 and 11. I've uncommented everything and run npm install --save classlist.js and npm install --save web-animations-js. Everything builds and runs on chrome still, however it still doesn't run on IE11, any ideas behind this behavior? It opens with the angular logo on IE11, but just a blank screen.

am I missing something? I have searched the internet and spoken with gitter to no avail.

I have found similar posts, but have not found a suitable answer. (for example, Angular 5 doesn't work in IE9 "Internet Explorer cannot display the webpage")

Found additional posts:
angular 5 application is working on edge but failing on ie11

also

Angular 2 / 4 / 5 not working in IE11

Attempted adding to index.html: < meta http-equiv="X-UA-Compatible" content="IE=edge" /> (added space to display)

Attempted adding to index.html:

and import 'core-js/client/shim'; to polyfill.ts

Polyfill.ts:

import "core-js/es7/reflect";
import "zone.js/dist/zone";

/* IE9, IE10 and IE11 */
 import "core-js/es6/array";
 import "core-js/es6/date";
 import "core-js/es6/function";
 import "core-js/es6/map";
 import "core-js/es6/math";
 import "core-js/es6/number";
 import "core-js/es6/object";
 import "core-js/es6/parse-float";
 import "core-js/es6/parse-int";
 import "core-js/es6/regexp";
 import "core-js/es6/set";
 import "core-js/es6/string";
 import "core-js/es6/symbol";
 import "core-js/es6/weak-map";
/* IE10 and IE11 for NgClass support on SVG elements */
import "classlist.js";  // Run `npm install --save classlist.js`.

/*added for testing purposes, no positive result.*/
//import 'core-js/es7/reflect';
//import 'core-js/client/shim';

/* IE10 and IE11 for Reflect API. */
 import "core-js/es6/reflect";

/* Web Animations */
 import "web-animations-js";  // Run `npm install --save web-animations-js`.

Also: Added

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

to my index.html

Alright, it's been added-- the commented out things have been added due to recommendations from other stack overflow pages, however--did not have an effect//produce the desired outcome. — Justin Le, Jul 19 '18 at 15:46
and of course--like stated in OP, I did run the npm installs that are listed in the comments. Thank you in advance for any help that you guys can offer! — Justin Le, Jul 19 '18 at 15:50
do you get any errors from the console window of IE? (open the console window, then refresh the page) — ps2goat, Jul 19 '18 at 16:03
Yes, I get two syntax errors: Script1002: syntax error Vendor.js (137,1) Script1002: syntax error main.js and an HTML1506: Unexpected token localhost:8095 (25,1) and those refer to these lines: in vendor.js: class PlatformLocation { } in main.js — Justin Le, Jul 19 '18 at 16:09
Have you looked at this thread - https://github.com/angular/angular/issues/23927 ? — Narm, Jul 19 '18 at 16:35
Looking at this... I guess I need to look into transpiling es6 to es5 using babel? Is that the correct assumption? — Justin Le, Jul 19 '18 at 16:43
And if so... am I just transpiling the code that is causing errors in IE (vendor.js and main.js)? — Justin Le, Jul 19 '18 at 16:53

score 6 · Answer 1 · answered Jul 19 '18 at 21:20

To resolve this issue, I:

1.  changed TSConfig to target ES5, and the module to es2015.
2.  I changed the order of the polyfills,
3.  I reran downloads for installing classlist.js and web-animations.js.
4.  and, I added:       < meta http-equiv="X-UA-Compatible" content="IE=edge">
to my html right below the meta tag <meta charset="utf-8">.

Not sure exactly which part of this solved my issue. I ordered this list in the order in which I believe impacted the result.

All I needed to do was change TSConfig to target ES5. – x5657 Mar 18 '19 at 12:03 — x5657, Mar 18 '19 at 12:03

Hearen · Accepted Answer · 2020-09-20T08:29:13.550

If you are using Angular v7.*.* , you can solve it just follow the polyfills.ts in src/polyfills.ts and follow its inside tips like this:

/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
 *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
 */

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

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

/** IE10 and IE11 requires the following for the Reflect API. */
import "core-js/es6/reflect";

What you need to do is just to uncomment the lines above and install the another following:

npm install --save classlist.js

Again, ng serve you can check your result in IE 11 now.

Angular 6 for IE11 resulting in blank window

2 Answers2