Angular 4 error in IE11

Question

I have Angular 4 project that works successfully on Chrome. However it doesn't load on IE11 with the following error in polyfills.bundle.js(I use command "ng build --env=prod" to build site):

var exports = module.exports = function (iterable, entries, fn, that, ITERATOR) {
  var iterFn = ITERATOR ? function () { return iterable; } : getIterFn(iterable);
  var f = ctx(fn, that, entries ? 2 : 1);
  var index = 0;
  var length, step, iterator, result;
  if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!');

iterFn is undefined here so error is thrown. Please advise.

Perhaps state that you added/uncommented the polyfills from polyfills.ts? — Per Hornshøj-Schierbeck, Sep 06 '17 at 08:47
Thank you, Per. That was really the root cause of the issue. — Sergiy, Sep 07 '17 at 12:25

score 49 · Answer 1 · answered Sep 04 '17 at 13:04

For better support of IE11 you need to add some es6 imports exclusively in your polyfills. List is as follows:

/** 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';

This can be done by commenting out, all the lines which are marked as IE9, IE10 and IE11 polyfills in the file polyfills.ts — Harry Berry, Sep 18 '17 at 12:28

score 2 · Answer 2 · answered Jul 20 '18 at 12:44

As @Sumit has answered need to add these imports in the polyfill.ts file :

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

Plus you need to import reflect api:

/** IE10 and IE11 requires the following for the Reflect API. */

 import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/

// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators),you 
//can remove.

import 'core-js/es7/reflect';

Plus if you are using Angular material animation in your project then it is necessary to import web animations for angular material to function properly on IE.

import 'web-animations-js';  // Run `npm install --save web-animations-js`.

And last but not the least a very important library to function properly your Angular project on IE:

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

.

score 0 · Answer 3 · answered Apr 08 '19 at 22:02

I had the same error and the array class was required for this particular error. For the sake of keeping my libraries smaller, I just imported the array class. After that, I got a different error which required the string class which is used often so I'd start by bringing those two in. I'm a bit of a minimalist so I didn't want to bring the others in until needed.

import 'core-js/es6/array';
import 'core-js/es6/string';

Angular 4 error in IE11

3 Answers3

Linked