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 (если их нет, см. первую попытку).

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