Angular 4 error in IE11

问题:

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.

回答1:

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

回答2:

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`

.

回答3:

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