Custom Element in Angular 17

since I updated Angular to version 17 I can't create web components.. I used to do it in app.module, where are they created now? I tried in app.component as the guide says but it doesn't seem to work.. Can someone help me please??

I tried in app.component as the guide says but it doesn't seem to work..

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <input #input value="Message" />
    <button type="button" (click)="popup.showAsElement(input.value)">Show as element</button>
  `,
  providers: [PopupService],
  imports: [PopupComponent],
})
export class AppComponent {
  constructor(
    injector: Injector,
    public popup: PopupService,
  ) {
    // Convert `PopupComponent` to a custom element.
    const PopupElement = createCustomElement(PopupComponent, {injector});
    // Register the custom element with the browser.
    customElements.define('popup-element', PopupElement);
  }
}

See the way to create a custom Element. For the purposes of this example

In your main.ts replace

bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));

with

createApplication()
.then((app) => {
    const app = createApplication({providers:[...]});
    const PopupElement = createCustomElement(AppComponent, {
        injector: (app).injector
    });
    customElements.define('popup-element', PopupElement);
}
.catch((err) => console.error(err));

a stackblitz (see that, you need refresh the "visor" if you make any change)

however, this can be simplified further without removing the bootstrapApplication method:

bootstrapApplication(AppComponent, appConfig)
.then((app) => {
    const PopupElement = createCustomElement(AppComponent, {
        injector: (app).injector
    });
    customElements.define('popup-element', PopupElement);
})
.catch((err) => console.error(err));

Update for Angular 18

If we have an AppComponent standalone. In main.ts

createApplication()
    .then((app) => {
        const MyComponent= createCustomElement(AppComponent, { injector: app.injector });
        customElements.define('my-tag', MyComponent);
    })
    .catch((err) => console.error(err));