Превратить Stackblitz HelloComponent в веб-компонент?

Question

Попытка превратить HelloComponent, который поставляется с проектом по умолчанию Stackblitz Angular, в веб-компонент, работающий в том же проекте.

https://stackblitz.com/edit/angular-custom-elements-hello?file=src%2Fapp%2Fapp.module.ts

В AppModule я зарегистрировал это так:

export class AppModule { 
  constructor(injector:Injector) {
    const hello = createCustomElement(HelloComponent, { injector }) 
    customElements.define('h-c', hello)
  }

  ngDoBootStrap() {

  }
}

И когда приложение компилируется, оно генерирует следующую ошибку:

AppComponent. html: 1 ОШИБКА TypeError: hostEl.createShadow Root не является функцией

Не знаю, почему. Любые идеи? Также возможно ли запустить веб-компонент в Angular Project или его нужно скомпилировать отдельно, а затем импортировать?

Answer 1

Ну, вам нужно несколько изменений, чтобы он работал в среде Stackblitz.

Сначала вам понадобится этот пакет:

@ webcomponents / webcomponents js

Затем вам нужно добавить его в polyfills.ts

import'@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'

А также вы должны удалить

encapsulation: ViewEncapsulation.Native

Stackblitz