feat(elements): create custom elements without NgModule

[pkozlowski-opensource]

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.

[michielkikkert]

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

[pkozlowski-opensource]

@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]

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?

[gkalpak]

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]

@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.

[AndrewKushnir]

@pkozlowski-opensource the API looks really nice 👍

Reviewed-for: public-api

[jessicajaniuk]

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

[dylhunn]

reviewed-for: public-api, fw-core

[jessicajaniuk]

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

[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.}