I construí un componente web simple a través de Angular usando @ @ de Pascal Prectutoria, que puedes ver trabajandoAQU. Se compila automáticamente en Stackblitz en el enlace, pero no localmente.

Mi objetivo final es tener el código para el Componente Web resultante en un archivo separado localmente. Eventualmente, lo subiré a alguna parte y lo extraeré a través de una sola<script> tag, al igual que los componentes web normales raw-html / javascript. Creo que la pregunta habla por sí sola, pero puede leer los detalles a continuación si desea:

Detalles:

Para resumir mi código en el enlace de arriba, tengo un componente muy básico:

import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `<h1>Hello world</h1>`
})

export class HelloComponent  {}

y tengo un módulo:

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements'
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [HelloComponent],
  entryComponents: [HelloComponent]
})

export class AppModule { 
  constructor(private injector: Injector) {}
  ngDoBootstrap() {
    const HelloElement = createCustomElement(HelloComponent, {
      injector: this.injector 
    });

    customElements.define('hello-world', HelloElement);
  }
}

Aquí hay una explicación del módulo anterior:

Agregar mi componente a laentryComponents array para que no lo saque el árbol angular (ya que no es accesible en el arranque de la aplicación:entryComponents: [HelloComponent]

Ejecute mi componente a través decreateCustomElement para poder usarlo como un html regularWeb Component:

const HelloElement = createCustomElement (HelloComponent, {injector: this.injector});

Finalmente, le pido a Angular que compile este componente enmain.ts:

platformBrowserDynamic().bootstrapModule(AppModule);

Aquí están las cosas que leí / vi completamente (entre docenas de otros enlaces, la mayoría de los cuales están fechados, como la introducción original de Angular Elements):

Web Components from Scratch por Tomek Sułkowski (Nunca lo compila por separado)
Componentes web con CLI (El mismo problema
Web Components por Academind (Una vez más, este tipo también los usa dentro de las aplicaciones angulares)

Gracias por cualquier ayuda