Використання та інтеграція Web Components в Angular

Web Components, сучасна веб-технологія, що пропагує підхід до розробки на основі компонентів. Angular, Web Components підтримують взаємодію різних фреймворків, підвищуючи сумісність.

Що таке Web Components?

Web Components — це технологія для створення компонентів, незалежних від фреймворка:

1. Custom Elements: Дозволяє створювати власні HTML теги.
2. HTML Templates: Створює шаблони контенту, що можна використовувати повторно.

Чому ми повинні використовувати Web Components?

• Працює незалежно від фреймворка: Легко можна використовувати в проєктах на React, Vue або чистому JavaScript.
• Зменшує дублювання коду: Компоненти можна використовувати багато разів.
• Забезпечує ізоляцію стилів: Запобігає конфліктам CSS правил між компонентами.
• Перевага в продуктивності: Легкий і швидкий, забезпечує оптимізацію в браузерах.

Як створити Web Components в Angular?

1. Налаштування проєкту та пакунки

Першим кроком давайте створимо Angular проєкт та встановимо необхідні бібліотеки:

bashng new angular-web-components-demo --routing --style=scss  
cd angular-web-components-demo  
ng add @angular/elements

Пакет Angular Elements дозволяє нам використовувати Angular компоненти як Web Components.

2. Створення Web Component компонента

Давайте створимо новий Angular компонент:

ng generate component custom-button

custom-button.component.ts

import { Component, Input } from '@angular/core';  

@Component({  
 selector: 'app-custom-button',  
 templateUrl: './custom-button.component.html',  
 styleUrls: ['./custom-button.component.scss']  
})  

export class CustomButtonComponent {  
 @Input() label: string = 'Click Me';  
 @Input() color: string = 'blue';   

 onClick() {  
 alert(`Button clicked: ${this.label}`);  
 }  
}

custom-button.component.html

 {{ label }}  

custom-button.component.scss

button {  
 border: none;  
 padding: 10px 20px;  
 font-size: 16px;  
 cursor: pointer;  
 border-radius: 5px;  
 color: white;  
}

Цей компонент приймає вхідні параметри label і color та створює кнопку.

3. Перетворення Angular компонента на Web Component

Тепер перетворимо цей компонент на Web Component, щоб його можна було використовувати поза межами Angular додатку. Додамо наступний код у файл app.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Injector } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { createCustomElement } from '@angular/elements';  
import { AppComponent } from './app.component';  
import { CustomButtonComponent } from './custom-button/custom-button.component';  

@NgModule({  
 declarations: [  
 AppComponent,  
 CustomButtonComponent  
 ],  
 imports: [  
 BrowserModule  
 ],  
 providers: [],  
 bootstrap: [],  
 schemas: [CUSTOM_ELEMENTS_SCHEMA]  
})  
export class AppModule {  
 constructor(private injector: Injector) {  
 const customButton = createCustomElement(CustomButtonComponent, { injector });  
 customElements.define('custom-button', customButton);  
 }  

 ngDoBootstrap() {}  
}

У цьому коді:

• За допомогою функції createCustomElement ми перетворили компонент на Web Component.
• Використовуючи customElements.define('custom-button', customButton);, ми дозволили використовувати цей компонент у HTML через тег custom-button.
• Використовували метод ngDoBootstrap(), щоб запустити модуль вручну.
  Використання Web Component

Тепер ми можемо використовувати наш компонент у файлі index.html:

Angular компонент тепер можна використовувати як Web Component, незалежний від фреймворка.

Інтеграція Web Components в існуючий Angular проєкт

Щоб використовувати цей компонент в іншому Angular проєкті або в різних фреймворках, ми можемо скомпілювати та експортувати його за допомогою команд build.

1. Компіляція Web Component
Налаштуємо конфігурацію у файлі angular.json:

"outputPath": "dist/web-component-demo",  
"main": "src/main.ts",  
"polyfills": "src/polyfills.ts",  
"scripts": []

Після цього виконаємо команду компіляції:

ng build --output-hashing=none --single-bundle

Після виконання цієї команди ми можемо додати згенерований файл main.js в інший проєкт:

2. Використання в іншому проєкті

Так ми можемо використовувати Web Component в інших проєктах, незалежно від фреймворка.

Сценарії використання Web Components

• Мікрофронтенди: Для об'єднання додатків, написаних різними технологіями в великих проєктах.
• Спільні UI компоненти: Для обміну UI компонентами в корпоративних чи відкритих проєктах.
• Використання сучасних компонентів в застарілих додатках: Для інтеграції сучасних Angular компонентів в старі системи.

Що слід врахувати при використанні Web Components

1. Підтримка браузерами: Web Components підтримуються сучасними браузерами, але для старих браузерів (наприклад, IE 11) може знадобитися використання polyfill.
2. Продуктивність: Надмірне використання в великих проєктах може призвести до проблем з продуктивністю.
3. Залежності: Оскільки Web Components мають бути незалежними, важливо мінімізувати зовнішні залежності.

Перекладено з: Angular’da Web Components Kullanımı ve Entegrasyonu