How To Fix "Out Of Stack Space" Issue While Running Angular SPFx WebPart In IE11

Facing “Error: Out of Stack Space” issue while the Angular SPFx WebPart runs in the IE11? This article helps you to resolve the issue and run the Angular SPFx in IE11.

In this article, I am going to provide the steps to fix an issue for the Angular SPFx WebPart to run in the Internet Explorer 11 (IE11).

While the Angular SPFx web part runs in the Internet Explorer 11, it will throw the below error.

How To Fix "Out Of Stack Space" Issue While Run Angular SPFx WebPart In IE11

A proper solution to this issue for the SPFx is to import the core-js polyfills in your WebPart.

To resolve the above issue, follow the below steps.

Step 1 - Create Angular SPFx WebPart

Create an SPFX WebPart and integrate Angular in your SPFx WebPart.

Step 2 - Add core-js package in your WebPart

Go to the Node.js command prompt and make sure you are pointing the project directory and running the below command to include “core-js” package in your WebPart.

npm install core-js

Step 3 - Add Polyfills.ts file in your WebPart

Create a Polyfills.ts file in your WebPart and import the below code in the Polyfills.ts.

  1. import 'core-js/es6/symbol';  
  2. import 'core-js/es6/object';  
  3. import 'core-js/es6/function';  
  4. import 'core-js/es6/parse-int';  
  5. import 'core-js/es6/parse-float';  
  6. import 'core-js/es6/number';  
  7. import 'core-js/es6/math';  
  8. import 'core-js/es6/string';  
  9. import 'core-js/es6/date';  
  10. import 'core-js/es6/array';  
  11. import 'core-js/es6/regexp';  
  12.   
  13. if (WeakMap.toString().indexOf('function WeakMap()') === -1) {  
  14.     WeakMap = undefined;  
  15. }  
  16. import 'core-js/es6/weak-map';  
  17. // Check for native support of Map vs Polyfill  
  18. if (Map.toString().indexOf('function Map()') === -1) {  
  19.     Map = undefined;  
  20. }  
  21. import 'core-js/es6/map';  
  22. // Check for native support of Map vs Polyfill  
  23. if (Set.toString().indexOf('function Set()') === -1) {  
  24.     Set = undefined;  
  25. }  
  26. import 'core-js/es6/set';  
  27. export class Polyfills {  
  28. }  
Step 4 - Import code in WebPart.ts file.
  1. Import the Polyfills file in your WebPart.ts file.
    import { Polyfills } from './Polyfills';

  2. Import es6 reflect in the WebPart.ts file to provide intercepting Javascript operations.
    import 'core-js/es6/reflect';

  3. Paste the below code in the top of the render() method in the WebPart.ts file
    window['polyfills'] = Polyfills;

Now, the Angular SPFx WebPart runs in the Internet Explorer 11.

How To Fix "Out Of Stack Space" Issue While Run Angular SPFx WebPart In IE11

I have attached a sample Angular SPFx WebPart Solution for your reference which has the solution for the IE11 issue.

I hope you learned how to solve the "Error: Out of stack space" issue in IE11.