Angular CLI + Angular 4 = IE10 doesn't work

Viewed 3009

I can't get IE10 to load a brand new Angular CLI project. There is no other code other than what comes with default Angular CLI package when you run 'ng new'.

I'm using Angular 4.2.4, @angular/cli 1.3.1 and IE 10.0.9200.16519

I have tried 'ng build' and 'ng build --prod' and both return the same error messages. The project runs on every other browser.

I have uncommented all polyfill lines (and installed everything as per instructions in the file) that are needed to run IE9, IE10, IE11 in the polyfills.ts of the project.

The 4 errors are:

Expected identifier polyfills.bundle.js, line 6127 character 67

var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7;

Object doesn't support property or method 'bind' styles.bundle.js, line 279 character 3

update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);

Expected identifier vendor.bundle.js, line 2056 character 71

exports.rxSubscriber = (typeof Symbol === 'function' && typeof Symbol.for === 'function') ?
Symbol.for('rxSubscriber') : '@@rxSubscriber';

Object doesn't support property or method 'defineProperty' main.bundle.js, line 132 character 1

Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

Seems like 'Symbol', 'bind', and 'defineProperty' are the culprits.

I do see Symbol and Object es6 polyfills being included in the pollyfills.ts project file though:

****************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
...
(+ all the other polyfills that are in the polyfills.ts file)

How do I get this going on IE10?

2 Answers

Add:

<meta http-equiv="x-ua-compatible" content="IE=edge">

to <head> section of index.html.

Setting IE9,IE10,IE11 compatibility mode to EDGE fixed all the issues.

By default angular cli project doesn't unable polyfills which required for angular application to run on IE9, IE10 and IE11. We need to uncomment all required polyfills present under src/polyfills.ts it in order to run application on IE. (Make sure your have installed all instructed node packages like classlist.js, web-animations-js & intl using `npm install --save command.)

Related