Custom Elements из Angular в Angular

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

Зачем?

Код, собранный в веб-компонент, можно использовать где угодно, достаточно только подключить сгенерированный скрипт. Компонент можно внедрить в код страницы, причём, всё равно каким образом: можно в HTML (<my-custom-component></my-custom-component>), можно через DOM-API (document.body.append(document.createElement('my-custom-component')) ), после этого получим работающее микро-приложение c Angular под капотом.

Задача

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

Итого, задача: динамически создать и отобразить зарегистрированные в браузере веб-компоненты.

Странно, но готовое решение нагуглить не получилось. Пришлось городить велосипед. Пост пишется в том числе и с целью получить правильное решение в комментариях.

Процесс решения

Внимание! Весь код в статье не тестировался и даже не собирался. Приводится исключительно для примера.

Angular позволяет динамически создавать компоненты и в документации описано, как это делать. Проблема в том, что для этого на этапе сборки необходимо знать тип компонента. Не подходит.

NB: По-моему, раньше можно было создавать элементы по селектору, но задепрекейтили.

Первая попытка

Хорошо, там сверху написано, что достаточно просто сгенерировать правильный HTML, попробуем сделать это влоб, через динамически создаваемый компонент-обёртку (и не забыть про санитайзинг):

this.componentTagName = '<my-custom-component></my-custom-component>';

<div [innerHtml]="componentTagName"></div>

Странно, работает.

А как насчёт @Input/@Output в этом HTML?

this.componentTagName = '<my-custom-component [someInput]="someInputVariable"></my-custom-component>';

Не работает. Что там с dependency injection, я думаю, тоже понятно.

Вторая попытка

Так, у нас есть Renderer2, попробуем через него.

<div #componentContainerRef>   Component '{{componentTagName}}' is not registered in the browser's component registry yet. </div>

и

customElements.whenDefined(this.componentTagName).then(() => {   const element = this.renderer.createElement(this.componentTagName);   this.renderer.appendChild(this.componentContainerRef.nativeElement, element); });

Работает. Снова, как насчёт @Input? Естественно, если отображаемый веб-компонент его поддерживает:

customElements.whenDefined(this.componentTagName).then(() => {   const element = this.renderer.createElement(this.componentTagName);   this.renderer.setProperty(element, 'someInput', this.componentInput);   this.renderer.appendChild(this.componentContainerRef.nativeElement, element); });

Работает. А @Output? Только не через setProperty (я его ещё не тестировал, потому что, теоретически, компоненты могут быть абсолютно любыми, не только Angular’овскими), а просто поймаем какое-нибудь событие (типа CustomEvent), которое отправил веб-компонент:

customElements.whenDefined(this.componentTagName).then(() => {   const element = this.renderer.createElement(this.componentTagName);   this.renderer.setProperty(element, 'someInput', this.componentInput);   this.renderer.listen(     element,     'customComponentEvent',      event => this.onEventReceivedFromComponent   );   this.renderer.appendChild(this.componentContainerRef.nativeElement, element); });  onEventReceivedFromComponent(event: CustomEvent) {   console.info(`${this.componentTagName} received event: `, event); }

Хм, не работает, теряется this, тогда попробуем вот так:

this.renderer.listen(   element,   'customComponentEvent',   event => this.onEventReceivedFromComponent.apply(this, [event]) );

Работает.

А что с dependency injection?

Можно инжектить всё что хочешь в компонент-обёртку и реализовать логику в нём. Как передать/получить данные в/из веб компонента мы уже знаем. Например, вот код компонента и его обёртки с подключением к общей шине событий:

// Angular Elements component  import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';  const tagName = 'my-custom-component';  @Component({   selector: tagName,   templateUrl: '<input [(ngModel)]="messageText" type="text"><button (click)="onSendMessageClick()">Send message</button>' }) export class ExternalWidgetComponent implements OnInit {   @Input('messageReceiver') messageReceiver: EventEmitter<any>;   @Output('customComponentMessage') messageSender = new EventEmitter<any>();    static readonly tagName = tagName;   messageText: string = '';    constructor() {   }    ngOnInit(): void {     if (this.messageReceiver) {       this.messageReceiver.subscribe(this.onMessageReceived);     }   }    onSendMessageClick(): void {     this.messageSender.emit({text: this.messageText});   }    onMessageReceived(message) {     console.log(`${tagName} received the message: `, message);   } }  // Wrapper component import { Component, ElementRef, EventEmitter, Input, Renderer2, ViewChild } from '@angular/core'; import { EventBusService } from '../event-bus.service';  @Component({   selector: 'web-component-wrapper',   template: `<div #componentContainerRef>Component '{{componentTagName}}' is not registered in the browser's component registry yet.</div>` }) export class WebComponentWrapperComponent {   @ViewChild('componentContainerRef') componentContainerRef: ElementRef;    componentTagName = '';    messageSender: EventEmitter<any> = new EventEmitter<any>();    // message name for the event bus   private messageType = 'customComponentMessage';    constructor(private renderer: Renderer2, private eventBus: EventBusService) {   }    renderComponentWhenDefined() {     customElements.whenDefined(this.componentTagName).then(() => {        const element = this.renderer.createElement(this.componentTagName);       this.renderer.setProperty(element, 'messageReceiver', this.messageSender);       this.renderer.listen(         element,         'customComponentEvent',         event => this.onEventReceivedFromComponent.apply(this, [event])       );        this.renderer.appendChild(this.componentContainerRef.nativeElement, element);     });      // re-route messages from the event bus to the web-component     this.eventBus       .observe(this.messageType)       .subscribe(this.sendMessageToComponent(message));   }    set componentName(value: string) {     this.componentTagName = value;     this.renderComponentWhenDefined();   }    // re-route messages from the component to the event bus   onMessageReceivedFromComponent(message: CustomEvent) {     this.eventBus.publish(this.messageType, message.detail);   }    sendMessageToComponent(message: any) {     this.messageSender.emit(message);   } }

Итог

Таким образом можно интегрировать в Angular-приложение доступные в браузере веб-компоненты, при условии, что известно имя компонента и сигнатуры его @Input/@Output (если их нет, см. первую попытку).

Спасибо за внимание.