Проблема с размещением веб-компонента на основе световых элементов в приложении angular 9

Question

Я создал веб-компонент, используя lit-element, lit- html. Он отлично отображается в современных браузерах, а также в IE 11 с использованием webcomponents-loader. js.

Но тот же веб-компонент, если я загружаю в приложение Angular, он просто не отображается. Использование следующих тегов сценария в файле index. html.

<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>

Получение следующих ошибок

SCRIPT28: Out of stack space

введите описание изображения здесь

Answer 1

Мне удалось решить эту проблему, импортировав core- js непосредственно перед веб-компонентами. js

Ссылка из https://github.com/webcomponents/webcomponentsjs/issues/968#issuecomment -402674742

Я все еще пытаюсь понять, есть ли варианты получше.

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js">   </script>
<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>

Answer 2

Похоже, вам также необходимо перенести эти модули в ES 5 для поддержки устаревших браузеров, таких как IE.

Информация ниже, я получил с официального сайта Lit-element.

Для поддержки старых браузеров, которые не поддерживают ES6 и спецификации веб-компонентов, вам необходимо предпринять несколько дополнительных шагов для создания кода, который будет работать в старых браузерах. Вы можете использовать два основных подхода:

• Создайте две версии проекта: меньшую, более быструю версию для современных браузеров и транспилированную версию с дополнительными полифилами для устаревшие браузеры.

• Создайте единую версию проекта для всех браузеров. Это проще, но будет медленнее в современных браузерах.

На высоком уровне вам необходимо сделать следующее для вашей устаревшей сборки:

• Скомпилировать в ES5. Babel - наиболее часто используемый инструмент для этого.

  • Вам необходимо скомпилировать модули lit- html и LitElement (из папки node_modules), а также ваш код.

  • Вам необходимо преобразовать модули JavaScript в формат, совместимый со старыми браузерами, например System JS, или простой файл JavaScript, который можно загрузить в тег.

  • Не связывайте полифиллы времени выполнения Babel с кодом вашего веб-компонента. Они должны быть объединены отдельно.

• Загрузите необходимые полифиллы перед загрузкой веб-компонентов.

  • Загрузите Babel runtime polyfills first.
  • Загрузите веб-компоненты, polyfills .
  • Почти во всех случаях вы также захотите загрузить custom-elements-es5 -adapter. js, чтобы ваша версия ES5 могла работать и в новых браузерах. Вы можете загрузить этот файл до или после полифилов веб-компонентов.

Ссылка:

LitElement, поддерживающий старые браузеры