Skip to content

feat(elements): create custom elements without NgModule#46475

Closed
pkozlowski-opensource wants to merge 2 commits intoangular:mainfrom
pkozlowski-opensource:environement_ref_explore
Closed

feat(elements): create custom elements without NgModule#46475
pkozlowski-opensource wants to merge 2 commits intoangular:mainfrom
pkozlowski-opensource:environement_ref_explore

Conversation

@pkozlowski-opensource
Copy link
Member

This is an exploratory PR to introduce APIs needed for Angular elements creation without NgModule. It has 2 changes (will split it into several commits before sending out for review):

  • introduces the notation of an environment and the createRootEnvironment API;
  • tests the createRootEnvironment API in the context of custom elements created from standalone components;

There are several open questions on the table but opening an early draft PR to discuss details of the APIs.

@pkozlowski-opensource pkozlowski-opensource added action: discuss area: core Issues related to the framework runtime area: elements Issues related to Angular Elements cross-cutting: custom elements cross-cutting: standalone Issues related to the NgModule-less world labels Jun 23, 2022
@ngbot ngbot bot modified the milestone: Backlog Jun 23, 2022
@pkozlowski-opensource pkozlowski-opensource force-pushed the environement_ref_explore branch 4 times, most recently from f8a74a4 to c2dc2d3 Compare June 23, 2022 14:50
@michielkikkert
Copy link
Contributor

Very much looking forward to this one, thanks! I’m curious about the ergonomics of this implementation.

@pkozlowski-opensource
Copy link
Member Author

pkozlowski-opensource commented Jun 23, 2022

@michielkikkert you can get the feel for the ergonomics by looking at the test.

But the tl;dr; is this:

// get a hand on the `ApplicationRef` to access its injector
const applicationRef = await createApplication();

// create a constructor of a custom element
const NgElementCtor = createCustomElement(TestStandaloneCmp, {injector: applicationRef.injector});

// register in a browser
customElements.define('test-standalone-cmp', NgElementCtor);

// good to go!

@manfredsteyer
Copy link
Contributor

I'm really happy to see this 🧡

Is there an option to bootstrap the custom element with noop-zone or is this subject to another RFC/ topic/ PR?

@pkozlowski-opensource pkozlowski-opensource force-pushed the environement_ref_explore branch 7 times, most recently from d634f09 to 26173a7 Compare July 6, 2022 07:21
@pkozlowski-opensource pkozlowski-opensource marked this pull request as ready for review July 6, 2022 16:06
Copy link
Member

@gkalpak gkalpak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So looking forward to this 🎉
Thank you, @pkozlowski-opensource 👏

I left a couple of minor comments/questions, but overall lgtm 👍

BTW, there are a couple of typos in the second commit message:

  • where ones want to --> where one wants to
  • environnement --> environment

@pkozlowski-opensource pkozlowski-opensource force-pushed the environement_ref_explore branch 5 times, most recently from 351b99a to 515a5fa Compare July 13, 2022 05:41
@pkozlowski-opensource
Copy link
Member Author

@gkalpak thnx for the detailed review and all the feedback. I believe that I've addressed most of it, feel free to do another pass on this PR.

Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pkozlowski-opensource the API looks really nice 👍

Reviewed-for: public-api

@pullapprove pullapprove bot requested a review from atscott July 13, 2022 23:39
@pkozlowski-opensource pkozlowski-opensource added action: review The PR is still awaiting reviews from at least one requested reviewer target: minor This PR is targeted for the next minor release and removed action: discuss labels Jul 14, 2022
The `createApplication` function makes it possible to create an
application instance (represented by the `ApplicationRef`)
without bootstrapping any components. It is useful in the
situations where ones wants to decouple and delay components
rendering and / or render multiple root components in one
application. Angular elements can use this API to create
custom element types with an environment linked to a
created application.
This commit adds a test demonstrating how a standalone Angular component
could be turned into a custom element.
Copy link
Contributor

@jessicajaniuk jessicajaniuk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: fw-core, public-api, fw-platform-server

@pkozlowski-opensource pkozlowski-opensource added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Jul 18, 2022
@dylhunn dylhunn self-requested a review July 18, 2022 16:18
Copy link
Contributor

@dylhunn dylhunn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed-for: public-api, fw-core

@jessicajaniuk
Copy link
Contributor

This PR was merged into the repository by commit 9285c66.

jessicajaniuk pushed a commit that referenced this pull request Jul 18, 2022
This commit adds a test demonstrating how a standalone Angular component
could be turned into a custom element.

PR Close #46475
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime area: elements Issues related to Angular Elements cross-cutting: custom elements cross-cutting: standalone Issues related to the NgModule-less world target: minor This PR is targeted for the next minor release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants