Angular 8, IE11 error on startup Function.prototype.toString: 'this' is not a Function object

Question

Since upgrading to Angular 8, production builds with the Angular CLI fail on startup in IE11. The error logged in the console is: "Function.prototype.toString: 'this' is not a Function object" and points to polyfills-es5.js.

The section in question in polyfills-es5.js is:

var InternalStateModule = __webpack_require__(
  /*! ../internals/internal-state */
  "./node_modules/core-js/internals/internal-state.js");

var getInternalState = InternalStateModule.get;
var enforceInternalState = InternalStateModule.enforce;
var TEMPLATE = String(nativeFunctionToString).split('toString');
shared('inspectSource', function (it) {
  return nativeFunctionToString.call(it);
});
(module.exports = function (O, key, value, options) {
  var unsafe = options ? !!options.unsafe : false;
  var simple = options ? !!options.enumerable : false;
  var noTargetGet = options ? !!options.noTargetGet : false;

  if (typeof value == 'function') {
    if (typeof key == 'string' && !has(value, 'name')) hide(value, 'name', key);
    enforceInternalState(value).source = TEMPLATE.join(typeof key == 'string' ? key : '');
  }

  if (O === global) {
    if (simple) O[key] = value; else setGlobal(key, value);
    return;
  } else if (!unsafe) {
    delete O[key];
  } else if (!noTargetGet && O[key]) {
    simple = true;
  }

  if (simple) O[key] = value; else hide(O, key, value); // add fake Function#toString for correct work wrapped methods / constructors with methods like LoDash isNative
})(Function.prototype, 'toString', function toString() {
  return typeof this == 'function' && getInternalState(this).source || nativeFunctionToString.call(this);
});

I created a new app from scratch and that obviously works fine in IE11. So I tried to work backwards and remove packages/change config until it matched the default app but continued to get the error.

Comparing the generated polyfills-es5.js files for both, they are different, but I couldn't find any information about how exactly that file is generated (my polyfills.ts file is the same as the default app).

I'm out of ideas on how to further troubleshoot it.

Answer 1

In tsconfig.json, target es5 (default is es6). In polyfills.ts, uncomment IE polyfills.

  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
   }

Polyfills.ts

     * BROWSER POLYFILLS
     */

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

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


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