Angular 4 app using IE 11, “Can't execute code

Question

I have an Angular app which I think is version 4. IE 11 crashes during a login sequence in this app: "Can't execute code from a freed script". According to the IE console the error happens in the polyfills bundle at line 10939 ("var testString = delegate.toString()"), which looks like this:

  var checkIEAndCrossContext = function (nativeDelegate, delegate, target, args) {
    if (!isDisableIECheck && ieOrEdge) {
        if (isEnableCrossContextCheck) {
            try {
                var testString = delegate.toString();
                if ((testString === FUNCTION_WRAPPER || testString == BROWSER_TOOLS)) {
                    nativeDelegate.apply(target, args);
                    return false;
                }
            }
            catch (error) {
                nativeDelegate.apply(target, args);
                return false;
            }
        }
        else {
            var testString = delegate.toString();   // <===== HERE!
            if ((testString === FUNCTION_WRAPPER || testString == BROWSER_TOOLS)) {
                nativeDelegate.apply(target, args);
                return false;
            }
        }
    }
    else if (isEnableCrossContextCheck) {
        try {
            delegate.toString();
        }
        catch (error) {
            nativeDelegate.apply(target, args);
            return false;
        }
    }
    return true;
};

I think that is from this line in the polyfills file:

 /* Zone JS is required by Angular itself.*/
 import 'zone.js/dist/zone';  // Included with Angular CLI.

This is from "package.json" regarding zone.js:

"zone.js": "^0.8.4"

The polyfill.ts file:

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * 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 to support `@angular/animation`. */
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import 'intl';  // Run `npm install --save intl`.
/**
 * Need to import at least one locale-data with intl.
 */
// import 'intl/locale-data/jsonp/en';

import 'hammerjs/hammer';

What would you recommend that i do in this case?

Answer 1

Simply use the below code to resolve the zone.js errors in IE 11/EDGE versions. The following code has to be placed in the polyfills.ts :

if (document['documentMode'] || /Edge/.test(navigator.userAgent)) {
    (window as any).__Zone_enable_cross_context_check = true;
}

Make the config changes in above code based on your requirement

Answer 2

One solution is to set the variable isEnableCrossContextCheck to true, so that IE should run the code containing a try/catch block, which can handle the error.

        if (isEnableCrossContextCheck) {
            try {
                var testString = delegate.toString();
                if ((testString === FUNCTION_WRAPPER || testString == BROWSER_TOOLS)) {
                    nativeDelegate.apply(target, args);
                    return false;
                }
            }
            catch (error) {
                nativeDelegate.apply(target, args);
                return false;
            }
        }
        else {
            var testString = delegate.toString(); 
            if ((testString === FUNCTION_WRAPPER || testString == BROWSER_TOOLS)) {
                nativeDelegate.apply(target, args);
                return false;
            }
        }

This post shows how to to that:

Angular 4 put a global constant available to zone.js

Answer 3

The same error appeared to me as well in Internet Explorer 11 as I was trying to create a web component using Angulal Elements with Angular 8. As it states in the polyfill.ts file that gets created with the project, all zone checks must be included in a separate file which should be imported in the polyfill.ts file before the zone.js import. More specifically the quote from the polyfills.ts

By default, zone.js will patch all possible macroTask and DomEvents
user can disable parts of macroTask/DomEvents patch by setting following flags because those flags need to be set before zone.js being loaded, and webpack will put import in the top of bundle, so user need to create a separate file in this directory (for example: zone-flags.ts), and put the following flags into that file, and then add the following code before importing zone.js. import './zone-flags.ts';

The flags allowed in zone-flags.ts are listed here. The following flags will work for all browsers.

(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame

(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick

(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js with the following flag, it will bypass zone.js patch for IE/Edge

(window as any).__Zone_enable_cross_context_check = true;

Following the specific intstructions my polyfills file now includes:

import './zone-flags.ts'; 
import 'zone.js/dist/zone';

and the file zone-flags.ts includes:

(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
(window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
(window as any).__Zone_enable_cross_context_check = true;

That finally removed the error from Internet Explorer 11

Answer 4

I'm on Angular 8 and I needed to combine two lines from a couple of these solutions. This suppressed the message for me.

in polyfill.js:

window['__Zone_enable_cross_context_check'] = true
window['__Zone_disable_IE_check'] = true;
import 'zone.js/dist/zone';  // Included with Angular CLI.

Answer 5

According to this thread the actual fix is to do nothing! This error only occurs when DevTools are open in IE, which basically means it only happens when you are looking for it. IE is just wonderful, isn't it?

Closing DevTools (as almost everyone will when viewing a website) will not cause this error to happen.

The above fixes can be applied for a testing or a development environment if needed, but ideally do not apply them to a production environment since it just adds some extra overhead that isn't needed.

Answer 6

As of Angular 7.x, I removed the comment from (window as any).__Zone_enable_cross_context_check = true; in polyfill.ts and recompiled the project.