Angular элементы

Angular-элементы реализуют подход упаковки компонентов Angular в нативные веб-компоненты (Custom Elements), совместимые с любой экосистемой JavaScript. Такой формат постепенно стал важным мостом между фреймворками, включая React, Vue и библиотеку Atomico, ориентированную на функциональные веб-компоненты.

Angular Elements компилирует компонент Angular в класс, наследующий HTMLElement, и регистрирует его через customElements.define. В результате появляется возможность встраивать компонент в существующее приложение без Angular, передавая данные через атрибуты и свойства DOM.

Ключевые особенности

  • Инкапсуляция стилей и логики внутри Shadow DOM (по выбору).
  • Автономность от фреймворка внутри окружения.
  • Взаимодействие через DOM-интерфейсы, привычные для любого стека.
  • Ленивая загрузка и подмешивание Angular runtime только при необходимости.

Минимальный пример Angular-элемента

import { Injector, NgModule, Component, Input, DoBootstrap } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'hello-element',
  template: `Hello {{name}}`
})
export class HelloElement {
  @Input() name = '';
}

@NgModule({
  imports: [BrowserModule],
  declarations: [HelloElement]
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const element = createCustomElement(HelloElement, { injector: this.injector });
    customElements.define('hello-element', element);
  }
}

После сборки появляется нативный элемент <hello-element name="Angular">.

Передача данных

Передача параметров осуществляется двумя способами:

  • Атрибуты — простые примитивы и строки.
  • Свойства DOM — объекты, массивы, функции.

События передаются через кастомные CustomEvent, что делает интеграцию универсальной для веб-компонентного стека.

Использование Angular Elements в связке с Atomico

Atomico создаёт веб-компоненты через функциональные Hooks-подобные конструкции. Поскольку оба подхода опираются на Custom Elements, совместимость достигается без адаптеров.

Пример встраивания Angular-элемента в компонент Atomico

import { c, html } from "atomico";

function Wrapper() {
  const name = "Atomico";

  return html`
    <hello-element name=${name}></hello-element>
  `;
}

customElements.define("wrapper-element", c(Wrapper));

Во время рендера Atomico воспринимает Angular-элемент как обычный DOM-тег.

Особенности взаимодействия

  • Доступность свойств: Atomico позволяет передавать сложные объекты напрямую через свойства DOM.
  • События: Angular Elements используют CustomEvent, что упрощает подписку в Atomico через onEvent.

Angular Elements в контексте сборки

Angular добавляет runtime, требующий оптимизации. Основная задача — минимизация размера бандла для изолированного элемента.

Техники уменьшения размера

  • отключение неиспользуемых модулей
  • ng build --prod для удаления инжекторов и рефлексии
  • переход на Ivy-рендерер, уменьшающий накладные расходы
  • lazy-инициализация элемента только при первом создании

Рендеринг и производительность

Производительность Angular-элементов зависит от объёма Angular runtime. Внутри Angular-контекста рендеринг быстрый, однако в окружении без Angular возникают дополнительные затраты на загрузку и инициализацию.

Сравнение с Atomico

Atomico ориентирован на минимализм и скорость:

  • отсутствие крупного runtime
  • функциональный стиль
  • реактивные Hooks
  • быстрый дифф-рендеринг

Angular-элементы выигрывают функциональностью инфраструктуры: DI, формы, маршрутизация, сложные компоненты.

Интеграционные сценарии

Использование Angular Elements оказывается полезным в следующих случаях:

  • постепенная миграция большого Angular-приложения
  • публикация отдельных виджетов
  • корпоративные микро-фронтенды
  • внедрение Angular-компонентов в React/Vue/Atomico/Svelte окружения

Atomico подходит для тонкого «клея» вокруг таких элементов, обеспечивая гибкую композицию.

Встраивание в неродную среду

Custom Elements не требуют знания Angular. С точки зрения хост-приложения это стандартные DOM-узлы, что упрощает эксплуатацию на стороне дизайна систем и библиотек компонентов.

Ограничения

  • Angular runtime не является полностью независимым; при множественном подключении возможно дублирование.
  • SSR не поддерживается напрямую.
  • Размер бандла выше по сравнению с нативными или лёгкими библиотеками вроде Atomico.

Архитектурный взгляд

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

Практические выводы по использованию

Использование Angular Elements оправдано при наличии уже существующей кодовой базы Angular или необходимости переносимости. Atomico выступает в роли компактного слоя композиции, предоставляя механизм упаковки, стилизации и обработки событий без крупного runtime. Такой подход уменьшает связанность между частями фронтенда и поощряет архитектуру микро-компонентов.

Оглавление