Define Angular Custom element without ngModules

Which @angular/* package(s) are relevant/related to the feature request?

elements

Description

Hello team, So without standalone on to define a custom element as you know we use below syntax:

export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}

  public ngDoBootstrap(): void {
    const ce = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('likes-app-element', ce);
  }
}

But how should we do this without NgModules? I tried to add above snippet to AppComponent but seems it does not create custom element and we receive error: the selector "likes-app-root" did not match any elements. I think this is because we already bootstrap AppComponent in main.ts file. With ngModules we could prevent bootstrapping by specifying bootstrap: []. To prevent bootstrapping we could just create custom element in bootstrap.ts but we have to provide Injector there. Thanks.

Proposed solution

I think we should be able to define elements in AppComponent.

Alternatives considered

Alternative was trying to define element in AppComponent but not working as expected.

Version

Angular 14.0.0-rc.0 Plaground branch: https://github.com/vugar005/youtube-webapp-turborepo/tree/feature/preview-angular-v14.0.0-rc.0/apps/likes-app

[pkozlowski-opensource]

PR https://github.com/angular/angular/pull/46475 has a sketch of our initial thinking on the API, if anyone is interested. The gist of it is:

import {createRootEnvironment} from '@angular/platform-browser';
import {createCustomElement} from '@angular/elements';

const envInjector = await createRootEnvironment({providers: ...});
const MyCustomElementCtor = createCustomElement(MyCustomElement, {injector: env});

The concepts / details might change but the above captures our current thinking.

[pkozlowski-opensource]

But how should we do this without NgModules?

We didn’t explore “Angular elements” without NgModules yet, this is on our roadmap, see: https://github.com/angular/angular/discussions/45554#discussioncomment-2716216