0

We are developing web parts for SharePoint 2013 on-prem using Angular 2 and have come across the 'out of stack space' issue.

After spending time checking, double checking, adding and removing every permutation of polyfills that the interweb suggests, we are out of answers. Thinking perhaps it was something to do with our app, we used the latest version of angular2-seed, reworked the web part to load the bundled output and still we get the error.

The app(s) work. They work in IE 9>11 and Edge, that's not the problem. What does happen though is that they break parts of the SharePoint ribbon. Most notably the Site Settings menu. When you try and select a menu item, a hover event is triggered which is where we see the 'out of stack space' error. After the error occurs then further use of the ribbon is limited as the JavaScript fails to run again.

The error is getting raised from zone.js in our app and in the angular2-seed app, trying to run:

try {
    return this._zoneDelegate.invokeTask(this, task, applyThis, applyArgs);
}
catch (error) {
   if (this._zoneDelegate.handleError(this, error)) {
       throw error;
}

However this is not coming from our code. As I mentioned above, it is coming from SharePoint JavaScript. It seems that something in the polyfills and/or zone.js is overriding something that SharePoint needs.

We have been using AngularJS (ng1) for the last couple of years and haven't had a problem but we are creating our first Angular (ng2) app and we have come unstuck with IE/Edge.

Some of the other posts and bug reports in various Angular projects have suggested different combinations of polyfills and other modules but believe me, we have tried. And the issue isn't with our app but with SharePoint functionality. Any help will be appreciated.

Brett Morris
  • 11
  • 3
  • out of stack space can occur if there's a `function.apply(thisArg, array)` where array is VERY big - does that sound possible - I mention this because of the `applyThis, applyArgs` in the tiny snippet of code you posted, wondering how many elements in `applyArgs` - the error should have a stack trace, perhaps tracing through that will help you find the exact cause – Jaromanda X Mar 08 '17 at 23:20
  • Checking the applyArgs, it only has 1 element. 'callee' and 'caller' have the 'Accessing the {} property ...not allowed in strict mode error. The stacktrace doesn't provide much, flipping between SharePoint JavaScript for mouse events and the zone.js code. – Brett Morris Mar 09 '17 at 01:07
  • maybe it's a recursion problem then – Jaromanda X Mar 09 '17 at 01:08
  • Unfortunately, I don't know what SharePoint is doing and don't want to go playing around in that space. But something is definitely not playing well together – Brett Morris Mar 09 '17 at 01:12
  • does this error happen in firefox and/or chrome? If not, then it's most likely some apply with a huge array - firefox can handle fn#apply with arrays of exactly 500000 elements, chrome ~300000+, and IE ~126000 - so, it would be interesting to check! – Jaromanda X Mar 09 '17 at 01:15
  • I've just come across this bug report https://github.com/angular/zone.js/issues/618, we were only using "~0.6.6", so I'm upgrading and trying. – Brett Morris Mar 09 '17 at 01:21
  • OK, seems like an issue with zone.js. https://github.com/angular/zone.js/issues/618 this is the issue. I have tried the fix and it mostly works. There are a couple of new things now but at least I've found the right place to look. Not sure how to end this question now trying to indicate where the answer is? – Brett Morris Mar 09 '17 at 02:12
  • If you have an answer - post an answer :p – Jaromanda X Mar 09 '17 at 02:43

1 Answers1

0

OK, seems like an issue with zone.js. github.com/angular/zone.js/issues/618 this is the issue. I have tried the fix and it mostly works. There are a couple of new things now but at least I've found the right place to look. At the time of this post, zone.js/npm wasn't updated but this should be done within days I would assume.

Brett Morris
  • 11
  • 3