CODEWITHSUNDEEP
angularinternet-explorerweb-component
maidi
maidi

Reputation: 3459

Webcomponentsjs polyfill does not work in IE11 (not enough stack space)

In my Angular8 Project I need to support CustomElements and ShadowDom. In my angular.json file in the scripts-section, the bundle is loaded:

"scripts": [
          "node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js"
        ],

In Edge, everything works fine, but Internet Explorer throws "ERROR Error: Uncaught (in promise): Error: Not enough stack space.". According to this issue, some people had similar errors as polyfills are conflicting with the webcomponentsjs bundle.

I also deleted the mentioned polyfills but the error still is there.

This is the complete list of my polyfills:

import 'core-js/es/symbol';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/object';
import 'core-js/es/array';
import 'core-js/es/date';
import 'core-js/es/regexp';
import 'classlist.js';
import 'core-js/es/reflect';

import 'zone.js/dist/zone';

import 'regenerator-runtime/runtime.js';
import 'custom-event-polyfill';
import 'url-polyfill';
import 'css-vars-ponyfill';
import '@babel/polyfill';
import 'intersection-observer';

I also tried loading the bundle or the webcomponentsjs-loader.js in the and waiting for the WebComponentsReady event, but it had no effect either.

Upvotes: 0

Views: 1197

Answers (1)

Yu Zhou
Yu Zhou

Reputation: 12961

You could also refer to this thread in GitHub. It mentioned a solution from another post which is loading core-js before webcomponents-loader like this, you could have a try:

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
  <script src="./@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>

Besides, the author also gives his solution as below. It seems that the Symbol polyfill used by webcomponents-loader causes a stack overflow in IE11:

<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="./@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

Upvotes: 1

Related Questions