1

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

8
  • 1
    Please show your code for polyfills.ts.
    – Narm
    Commented Jul 19, 2018 at 15:38
  • 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
    Commented Jul 19, 2018 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
    Commented Jul 19, 2018 at 15:50
  • 2
    do you get any errors from the console window of IE? (open the console window, then refresh the page)
    – ps2goat
    Commented Jul 19, 2018 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 <app-layout></app-layout>
    – Justin Le
    Commented Jul 19, 2018 at 16:09

2 Answers 2

6

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.

1
  • 3
    All I needed to do was change TSConfig to target ES5.
    – x5657
    Commented Mar 18, 2019 at 12:03
1

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.