Criei um componente Web simples via Angular usando o Pascal Prechttutorial, que você pode ver trabalhandoAQUI. Ele é compilado automaticamente no Stackblitz no link, mas não localmente.

Meu objetivo final é ter o código do Componente da Web resultante em um arquivo separado localmente. Eventualmente, eu vou carregá-lo em algum lugar e puxá-lo através de um único<script> , como os componentes da Web raw-html / javascript normais. Acho que a pergunta fala por si só, mas você pode ler os detalhes abaixo, se desejar:

Detalhes:

Para resumir meu código no link acima, eu tenho um componente muito básico:

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

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

export class HelloComponent  {}

e eu tenho um 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);
  }
}

Aqui está uma explicação do módulo acima:

Adicione meu componente aoentryComponents array, para que não seja eliminado pelo agitador de árvore angular (já que não é acessível na inicialização do aplicativo:entryComponents: [HelloComponent]

Execute meu componente através dofunção createCustomElement para que eu possa usá-lo como um html regularWeb Component:

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

Por fim, peço à Angular que compile esse componente emmain.ts:

platformBrowserDynamic().bootstrapModule(AppModule);

Aqui estão as coisas que eu li / assisti completamente (entre dezenas de outros links - a maioria dos quais é datada, como a introdução original dos Angular Elements):

Componentes da Web do zero por Tomek Sułkowski (Ele nunca o compila separadamente)
Componentes da Web com CLI (Mesmo problema)
Componentes da Web por Academind (Mais uma vez, esse cara também os usa em aplicativos Angular)

Obrigado por qualquer ajuda.