Search code examples
angularinternet-explorer-11polyfills

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


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.


Solution

  • I have the same issue. I found out that with the differential loading actually you can remove everything but 'zone.js'.

    However there is this bug: https://github.com/angular/angular/issues/31678 which suggests a work-around (adding .js to the zone import).

    Maybe it's related.

    EDIT: Same as other answers, updating fixed the problem.