Angular Elements и веб-компоненты

Angular Elements предоставляет возможность создавать веб-компоненты на базе Angular-компонентов, упаковывая их в стандарт Custom Elements API. Это позволяет использовать Angular-логику вне Angular-приложений.

Что такое Angular Element

Angular Element — это Angular-компонент, преобразованный в пользовательский HTML-элемент, совместимый с браузерными стандартами.

Пример использования после сборки:

<user-profile></user-profile>

Компонент работает без знания Angular со стороны окружения.

Архитектурная основа

Angular Elements опирается на:

  • Custom Elements v1
  • Shadow DOM (опционально)
  • Dependency Injection Angular
  • Change Detection Zone.js

Angular-компонент становится «обёрткой», внутри которой продолжает работать Angular runtime.

Подключение Angular Elements

Модуль:

import { createCustomElement } from '@angular/elements';

Регистрация элемента:

const element = createCustomElement(AppComponent, { injector });
customElements.define('app-root-element', element);

После регистрации элемент доступен глобально.

Жизненный цикл веб-компонента

Angular Element синхронизирует жизненный цикл Angular с Custom Elements:

  • connectedCallback → ngOnInit
  • disconnectedCallback → ngOnDestroy
  • изменение атрибутов → ngOnChanges

Это позволяет использовать стандартные Angular-хуки без изменений.

Входные и выходные параметры

@Input() автоматически маппится на HTML-атрибут:

@Input() title!: string;
<my-card title="Новости"></my-card>

@Output() преобразуется в DOM-событие:

@Output() closed = new EventEmitter<void>();
element.addEventListener('closed', () => { ... });

Это обеспечивает совместимость с любыми фреймворками.

Инкапсуляция стилей

Angular Elements поддерживает различные режимы инкапсуляции:

  • ViewEncapsulation.Emulated
  • ViewEncapsulation.ShadowDom
  • ViewEncapsulation.None

При использовании ShadowDom стили полностью изолированы:

@Component({
  encapsulation: ViewEncapsulation.ShadowDom
})

Это критично при встраивании компонента в сторонние сайты.

Размер бандла и оптимизация

Angular Elements включает часть Angular runtime. Для уменьшения веса применяются:

  • standalone-компоненты
  • отключение зон (ngZone: 'noop')
  • сборка без роутинга
  • lazy bootstrap

Пример bootstrap без AppModule:

bootstrapApplication(AppComponent, {
  providers: [...]
});

Использование вне Angular

Angular Elements применяются:

  • в legacy-приложениях
  • в микрофронтенд-архитектуре
  • в CMS и конструкторах страниц
  • в проектах с несколькими фреймворками

Компонент может быть использован в React, Vue, Svelte или чистом HTML без адаптеров.

Ограничения подхода

Особенности, которые необходимо учитывать:

  • больший размер по сравнению с нативными веб-компонентами
  • необходимость полифиллов для старых браузеров
  • сложность отладки вне Angular-контекста
  • единый Zone.js на страницу

Angular Elements целесообразны при повторном использовании сложной логики, а не для примитивных UI-элементов.

Сравнение с нативными веб-компонентами

Критерий Angular Elements Native Web Components
Логика Angular JavaScript
DI Да Нет
Размер Большой Минимальный
Шаблоны Angular HTML HTML
Change Detection Автоматический Ручной

Angular Elements занимают нишу между фреймворками и стандартами платформы, позволяя использовать Angular как фабрику компонентов для любой среды.

Оглавление