Повний посібник: Створення, імпорт і експорт Web Components за допомогою Angular 17

https://www.fullstackmaster.io/2024/12/17/guia-completo-criacao-importacao-e-exportacao-de-web-components-com-angular-17/

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

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

Що таке Web Components?

По суті, Web Components — це веб-стандарти, які дозволяють створювати користувацькі елементи HTML, які працюють нативно в будь-якому сучасному браузері. Вони складаються з трьох основних технологій:

1. Custom Elements: Визначають нові елементи HTML.
2. Shadow DOM: Забезпечує інкапсуляцію стилів і структури.
3. HTML Templates: Дозволяють повторно використовувати статичний контент.

Тепер, з Angular 17, робота з Web Components стала ще простішою та інтегрованою. Давайте подивимось, як це працює!

1. Створення Web Component з Angular 17

Тут ми створимо Web Component під назвою my-element. Він відповідатиме за відображення базового повідомлення та інкапсулюватиме стиль і поведінку.
Спочатку налаштуємо середовище:

Встановлення залежностей

Виконайте наступні команди в терміналі:

npm install @angular/elements  
npm install @webcomponents/custom-elements

Пакет @angular/elements перетворює ваші компоненти Angular на Web Components, тоді як @webcomponents/custom-elements додає підтримку для старіших браузерів.

Налаштування AppModule

У файлі app.module.ts налаштуйте Angular для реєстрації Web Component:

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { createCustomElement } from '@angular/elements';  
import { Injector } from '@angular/core';  
import { MyComponent } from './my-component/my-component.component';

@NgModule({  
 declarations: [MyComponent],  
 imports: [BrowserModule],  
 bootstrap: [], // Не потребує bootstrap  
 entryComponents: [MyComponent],  
})  
export class AppModule {  
 constructor(private injector: Injector) {  
 const myElement = createCustomElement(MyComponent, { injector });  
 customElements.define('my-element', myElement);  
 } ngDoBootstrap() {}  
}

Модуль використовує createCustomElement для перетворення MyComponent на Web Component під назвою my-element.

Створення компонента

Створіть компонент за допомогою Angular CLI:

ng generate component my-component

Змініть код HTML та CSS компонента, щоб відповідати потребам вашого проєкту.
Наприклад:

Ласкаво просимо до мого Web Component!

І стилізуйте його за бажанням:

/* my-component.component.css */
.message {
font-family: Arial, sans-serif;
color: #4CAF50;
text-align: center;
}


2. Експортування Web Component

Ви можете упакувати Web Component для розповсюдження в інших проєктах або навіть хостити його на CDN.

Створення Web Component

Додайте цей скрипт у ваш package.json для створення оптимізованого бандлу:

"scripts": {
"build:wc": "ng build --configuration production && npx rollup dist/my-component.js --file dist/bundle.js --format iife"
}


Потім виконайте:

npm run build:wc


Це створить автономний JavaScript файл, який можна використовувати будь-де.

Публікація на CDN

Завантажте створений файл на CDN, наприклад, на Cloudflare або jsDelivr. Це спростить інтеграцію компонента в зовнішні проєкти.

3.

Імпорт та використання Web Components

Інтеграція Web Component — це просто. Ось як це можна зробити в різних сценаріях:

Vanilla JS

Додайте скрипт безпосередньо в HTML:

Проєкти Angular

Додайте скрипт у angular.json:

"scripts": [  
  "https://cdn.example.com/my-element.js"  
]

Тепер ви можете використовувати `` у шаблонах Angular без будь-яких додаткових налаштувань.

Інші фреймворки (React/Vue)

Просто імпортуйте скрипт у index.html або головний файл проєкту.
Готово, ваш Web Component інтегровано!

Корисні поради

• Використовуйте Shadow DOM: Це гарантує, що зовнішні стилі не впливатимуть на компонент.
• Добре документуйте: Це полегшить життя тим, хто буде використовувати ваш Web Component.
• Тестуйте на різних браузерах: Переконайтеся в сумісності та надійності.

Висновок

Тепер ви знаєте, як створювати, імпортувати та експортувати Web Components за допомогою Angular 17. Такий модульний і гнучкий підхід може змінити ваш робочий процес, допомагаючи створювати більш масштабовані та добре організовані застосунки.

Якщо ви хочете побачити більше практичних прикладів або дізнатися інші прийоми роботи з Angular, ознайомтесь з цим детальним статтею про Web Components. Технологія постійно розвивається, і бути в курсі цих тенденцій — це необхідно. До зустрічі! 🚀

Перекладено з: Guia Completo: Criação, Importação e Exportação de Web Components com Angular 17