В этой статье мы собираемся преобразовать существующие библиотеки angular в веб-компоненты, чтобы их можно было использовать в других фреймворках или библиотеках, таких как React, Vue или даже vanilla Javascript.

Давайте покопаемся в этом…

Что такое веб-компонент?

Веб-компоненты — это набор различных технологий, позволяющих создавать повторно используемые настраиваемые элементы — с их функциональностью, изолированной от остального кода — и использовать их в своих веб-приложениях.

Давайте создадим библиотеку angular

  • Следующая команда создаст угловую рабочую область… Она используется для хранения всех связанных приложений и библиотек в одной рабочей области.
    ng new my-workspace — create-application false
  • Перенаправление в каталог проекта и создание демонстрационного приложения для запуска нашей библиотеки
    ng generate application demo
     Это создаст каталог projects, в котором все наши находятся приложения и библиотеки.
  • Теперь создадим библиотеку angular
    ng generate library my-lib
  • Мы добавим пример кода.

  • Давайте добавим несколько скриптов в package.json для сборки библиотеки
    "build:lib": "ng build my-lib"
  • Это создаст библиотеку и создаст папку в dist/my-lib.
  • Теперь мы создали библиотеку, давайте используем ее в нашем демонстрационном проекте.
  • Удалите весь код из app.component.html, добавьте тег библиотеки и передайте ему данные person, как показано ниже:
    ‹lib-my-lib [person]=" человек” (loadComp)=”onComponentLoad($event)”›‹/lib-my-lib›
  • и в app.component.ts добавить создать объект человека и обработать выходное событие
person = {
    name: 'John Doe',
    age: 30,
    address: '26th Main, Kormanagala, Bagalore, India'
};
onComponentLoad(event) {
   console.log(event);
}
  • Теперь мы можем запустить код с помощью следующих команд:
    npm run build:lib
    npm run start

Итак, здесь мы создали простую библиотеку angular, которая принимает некоторые входные данные и выводит некоторые события, которые можно использовать в любом проекте angular в качестве внешнего модуля.

Теперь нам нужно заставить эту библиотеку работать с другими интерфейсными фреймворками или с ванильным javascript…. Давайте сделаем это.

  • Давайте добавим новое приложение ng generate application web-component
  • ng add @angular/elements
  • Обновите app.module.ts, как показано ниже.
  • Добавьте MyLibComponent в объявление и entryComponents
  • Реализуйте интерфейс DoBootstrap.
  • Определите пользовательские элементы, как показано ниже, передайте MyLibComponent и определите имя пользовательского тега.

  • Добавьте скрипт для сборки веб-компонента, как показано ниже:
    npm run build:lib && ng build web-component — output-hashing none
  • Приведенная выше команда создаст библиотеку и веб-компонент. (его мы можем увидеть в папке dist)
    P.S. здесь добавление — output-hashing none означает, что он не будет присоединять хэш к файлам сборки.
  • Теперь мы создали веб-компонент, но есть одна проблема, если вы посмотрите на dist/web-component. Сгенерировано много файлов js, использование всех этих файлов в проекте немного утомительно, поэтому давайте объединим эти файлы в один файл .js
  • Чтобы связаться с этим, давайте напишем небольшой скрипт, как показано ниже, перед этим установим необходимые dev-зависимости
    npm i — save-dev fs-extra concat и создадим папку для запуска веб-компонента в пример проекта и назовите его web-component-demo (это имя папки используется в скрипте, поэтому, если вы хотите изменить его, внесите соответствующие изменения и в скрипт).

  • Теперь, когда мы запустим npm run build-web-component, он создаст библиотеку, а затем, используя эту библиотеку, создаст веб-компонент. После этого он объединит все js в один файл и поместит его в web-component-demo.

Теперь наш пользовательский веб-компонент готов! Давайте используем это в примере проекта.

  1. Поскольку мы уже создали образец папки web-component-demo для использования этого пользовательского веб-компонента.
  2. Теперь давайте создадим файл HTML, как показано ниже:

3. Мы подключили наш файл веб-компонента и создали div-оболочку

4. Создан элемент с использованием dom API, и обратите внимание, что мы отправляем строковые данные, поскольку он не принимает объект или массивы в качестве аргументов.

5. Итак, нам нужно обработать эти изменения в библиотеке, как показано ниже:

Давайте запустим это сейчас:

  • npm run build-web-component
  • Откройте index.html с live-server или напрямую из файлового браузера.

Наш вывод выглядит следующим образом:

Для справки проверьте git repo