"Out of stack space" in IE

[HalfLegend]

I am facing with a "Out of stack space" in IE

SCRIPT28: Out of stack space
File: zone.js, Line: 385, Column: 18
SCRIPT2343: Stack overflow at line: 385

I am working with Angular2 and it is working fine in Chrome and firefox. But an error in IE.
My IE version is IE11 x64

Context of the error code:

            ZoneDelegate.prototype.scheduleTask = function (targetZone, task) {
                try {
                    if (this._scheduleTaskZS) {
                        return this._scheduleTaskZS.onScheduleTask(this._scheduleTaskDlgt, this.zone, targetZone, task);
                    }
                    else if (task.scheduleFn) {
                        task.scheduleFn(task);
                    }
                    else if (task.type == 'microTask') {
                        scheduleMicroTask(task);
                    }
                    else {
                        throw new Error('Task is missing scheduleFn.');
                    }
                    return task; //<--- HERE is the error
                }
                finally {
                    if (targetZone == this.zone) {
                        this._updateTaskCount(task.type, 1);
                    }
                }
            };

[Delagen]

The same with angular 2 application in IE11

[Delagen]

Any movement in solve issue? This cause endless wrap from DirectiveNormalizer.normalizeTemplateAsync point

[Delagen]

Seems some polyfill issue. Corrected polyfills

[vicb]

outdated

[freezy]

Same issue here.

@Delagen Could you solve the problem? Which polyfill did you correct and how?

[Delagen]

@freezy I only replaced some polyfills with recommended in angular 2 docs, and issue was gone.

[freezy]

@Delagen I'm using the same polyfills.browser.ts as the one from the official Angular seed project. In the official doc I've only found the browser support page that only gives broad suggestions about the polyfills.

I've also tried just putting

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

as described here, with the same result. Could you be a bit more specific what you've changed, which polyfills and which versions you're using?

[Delagen]

Please see: https://angular.io/docs/ts/latest/guide/browser-support.html

import 'ie-shim'; // Internet Explorer 9 support

ie-shim use only requestAnimationFrame polyfill

You may use Animation feature

this not works in IE9 and require https://github.com/web-animations/web-animations-js for IE10+

also please check that no polyfills override or wrap setTimeout or setImmediate or other related functions

[freezy]

I've tried adding ie-shim as well as web-animations, same infinite loop. Chrome and Firefox still work perfectly while Safari and IE run into the loop.

This is a nightmare. I have no idea how to debug this. I will need to start from a minimal project and re-add component by component until I see where the problem is. The stacktrace is useless. Sometimes it's zone.js#436, sometimes polyfills.bundle.js#15501, as far as I can tell it doesn't even originate from anywhere in my code.

[Delagen]

Try to start with simple core-js import instead of

import 'core-js/es6';
import 'core-js/es7/reflect';

[sylvainpolletvillard]

I have the same issue, SCRIPT28: Out of stack space on app startup on IE11 when everything is working fine with Chrome and Firefox.

Here is what I tried:

• remove "zone.js/dist/long-stack-trace-zone" from polyfills
• replace "es6-shim" polyfill by "core-js" as suggested ; it leads me to another issue (TypeError: Object doesn't support property or method 'keys' angular#6479) telling me I have to use es6-shim. For some reason core-js polyfills Map but does not add a keys() method.
• change my loading setup to use SystemJS as suggested in Angular 2 Quickstart, instead of a simple script tag to load my app bundle

Currently my polyfills are :

• es6-shim/es6-shim.min.js
• whatwg-fetch/fetch.js
• reflect-metadata/Reflect.js
• zone.js/dist/zone.js

It seems to be an issue related to zone.js but I have no idea how to debug this.

EDIT: I found the solution. It comes from one of our dependencies that enforces its own Promise implementation (from https://github.com/stefanpenner/es6-promise). Using this polyfill, zone.js silently fails and the application does not load. The solution is to remove any other Promise polyfill and use the one provided by zone.js.

[BenGWeeks]

I have the same issue that I haven't been able to resolve by amending the polyfills.ts as discussed above (@freezy @sylvainpolletvillard @Delagen). Any ideas? You can see the code here:

https://github.com/webtechy/sp-dev-fx-webparts/tree/master/samples/kendo-simplebutton

(works in Chrome, but not IE). Polyfills is as follows:

// This file includes polyfills needed by Angular and is loaded before
// the app. You can add your own extra polyfills to this 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/set';
import 'core-js/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

And tried changing it to:

import 'reflect-metadata';
import 'zone.js/dist/zone'; 
import 'zone.js/dist/long-stack-trace-zone';

[JiaLiPassion]

@webtechy , I will try it later, how to reproduce? just use your repository and load the page in IE11, correct?

[BenGWeeks]

@JiaLiPassion Yep, once you have installed the node modules, you run it using gulp serve. Thanks for your help.

[BenGWeeks]

Hi @JiaLiPassion - did you have any joy? Even if just a visual inspection of polyfill.ts might reveal something you are aware of?

[JiaLiPassion]

@webtechy , I will try to reproduce with your repository this week, it seems I need to register an account from kendo UI, I will update status when I have some results.

[JiaLiPassion]

@webtechy, I just installed and gulp serve, I can see the application run on IE11 without out of space error, do I need to change polyfills?

[BenGWeeks]

Now that's strange as not the behaviour i get. No console error?

[JiaLiPassion]

@webtechy , no error, a lot of console log was output, and I did some click, everything work fine, I tried zone.js@0.7.8 and zone.js@0.8.5

here is the screen shot.

[BenGWeeks]

Ah, you need to click + and add the web part.

[JiaLiPassion]

@webtechy , I can reproduce, but I think it is a core-js problem, the out of space error is es6-map, and when error occurs, zone.js is not loaded yet. it may related to zloirock/core-js#143, so maybe you can post your reproduce workspace there, they can help you to resolve the issue better.