Define Angular Custom element without ngModules

[vugar005]

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]

But how should we do this without NgModules?

We didn't explore "Angular elements" without NgModules yet, this is on our roadmap, see: #45554 (comment)

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[pkozlowski-opensource]

PR #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.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[pkozlowski-opensource]

Support for Angular elements for standalone components (without the need of creating NgModule) was just merged into the main branch and will be part of the next release. More info: #46475 (comment)

[vugar005]

Hi @pkozlowski-opensource
Thank you.
I just saw Angular 14.1.1 was released but there is no mention of angular element.
Could you tell please whether is it expected?
Thanks in advance

UPDATE: sorry, just saw it is available from v14.2.0-next.0

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}