Сценарий

Мы используем скрипт веб-компонента element.js в нашем приложении Angular.

Подход

Схема пользовательских элементов

Включите CUSTOM_ELEMENTS_SCHEMA, позволяющий Angular распознавать пользовательские элементы. В пределах app.module.ts :

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
@NgModule({ 
    ...
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

Полифиллы Установить

npm install -D @webcomponents/webcomponentsjs

Копировать полифиллы

Команда angular.jsoncopy:

"assets": [
"src/favicon.ico",
"src/assets",
{
  "glob": "**/*.js",
  "input": "node_modules/@webcomponents/webcomponentsjs",
  "output": "webcomponents/"
}

Загрузка полифиллов

В течение src/index.html выполните:

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
if ( !window.customElements )
{ document.write('<!--') }
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! KEEP ME -->

Служить

Тестовая подача строительных лесов:

ng serve -o

Скрипт элемента

Поместите element.js в src/assets/js :

Сделайте элемент частью сборки, добавив его в angular.json :

"scripts": ["src/assets/js/element.js"]

Теперь вы можете использовать элемент в шаблонах компонентов.