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 🙏

[anmolsrepo]

This feature is highly needed. Would be great if it's added as earliest possible.

[yashsway]

This would be amazing!! I'm ready to contribute however needed.

[akikesulahti]

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?

Meanwhile waiting this feature. @blackat Can I ask if you have time to share more detailed instructions about your temporary solution to build via ngx plus. I'm not familiar with ngx-build-plus so any help is much appreciated.

This feature in official angular-cli would be super helpfull!

[haskelcurry]

@blackat I'd like to ask you to provide the instructions, too! Would be very helpful, thanks in advance

[sushilraj786]

This feature is highly needed. Would be great if it's added as earliest possible. We are eagerly waiting for this feature.

[fabionolasco]

The command "ng g library" can assist us in the creation of a library of UI components... let's say a custom accordion, carousel, and typeahead. We can then compile that library and publish as an NPM package to be used in different Angular apps. However, if the build process was also able to compile those same components into individual Web Components, that would be perfect. The keyword here is "individual"... so the final dist folder would have a regular JavaScript file for each Web Component (accordion, carousel, and typeahead).

[delrosariotanny]

I want my angular element to be installable via npm. so my angular element has to be generated as a library that is published to npm. Anyone has made it this way? thanks

[guilhermebc]

This feature is highly needed. Would be great to microfrontends architecture on project i'm working.

[rachitbhasin]

This would be a great feature to have. Especially like @fabionolasco mentioned, "individual" javascript files for each Web Component.

[dgp1130]

Brought this up with the rest of the tooling team and we agree this is a useful feature to include. We don't have bandwidth to work on this in the near future as Angular Elements has not been prioritized right now, but we would likely accept a PR implementing this feature.

[voxelstack]

Any news on this? I assume it's still not a thing and I need an application if I want to build web components?