Add Angular Elements to the "ng g library" compilation's results

[fabionolasco]

🚀 Feature request

Command (mark with an x)

- [x] generate

Description

We know that the "ng g library" helps us with the creation of reusable libraries. The components we create into ous libs can be compiled into multiple JS formats (ES2015, ES5, UMD, ...), which is awesome! Thank you CLI team! However, would it be possible to have them compiled into Web Components as well?

Describe the solution you'd like

I know that Angular Elements assist with the creation of Web Components. However, I was not able to add Elements to the libs created to "ng g library". Nonetheless, rather than adding it manually... it would be amazing if the CLI team could add that capability to the "ng g library" directly... so that this cmd could insert the necessary configuration for the ng-packager to use and automatically build Web Components alongside the ES2105, UMD, and other formats.

Describe alternatives you've considered

None yet.

[leomoreirarv]

This is gonna be a really useful feature.

[fabmelo]

I'm looking forward to see that feature working. It's gonna be so useful.

[benjamimbessa]

This is gonna be a really useful feature

[ricci-r]

Will be very useful in tthe future.

[leandrogf]

I wait the proposed solution. Thia would gelo a lot.

[fabionolasco]

In this way, we could have our components inside the libary, like:

projects/custom/src/lib/
projects/custom/src/lib/comp1
projects/custom/src/lib/comp2
projects/custom/src/lib/comp3
projects/custom/src/lib/comp4

And by mixing Angular Elements and "ng g library", through the compilation process, we would achieve a result similar to:

dist/
dist/custom/
dist/custom/bundle
dist/custom/esm5
dist/custom/esm2015
dist/custom/comp1_web_component_version
dist/custom/comp2_web_component_version
dist/custom/comp3_web_component_version
dist/custom/comp4_web_component_version

[ichintan]

Will be very useful in the hereafter.

[shameersalim]

Really looking forward to this one !!

[adonus19]

Very excited to see this happen!

[planavsky82]

This would be very helpful. I am running into a situation where I need to be able to import Angular-generated web components into other apps as ES6 modules. I've tried creating the custom elements in separate modules within a library project and using ng-packagr to build, but it seems that it won't compile the web component unless its through an application module.

[jstoppa]

+1

[blackat]

Hello,
Temporary Solution
is there any temporary solution/workaround or scaffolding stuff that can help for the time being?

Generate Web Component from existing Angular Component
Moreover will it be possible to take the existing angular component from a library and build them as web component as well? So it will be possible to use the same component as Angular Component in an Angular application and as Web Component elsewhere. For the time being there are some options, such as the encapsulation that can be added only in a component.

My temporary solution
I just generate a library and then I just build via ngx plus, but I have to duplicate the component, any idea to avoid this?

Really thanks a lot for the hard work and the answers 🙏