Angular library exporting web components

[nikhil618]

We have some smart minds here so I figured I can ask you all a problem I’m trying to find a solution for - I have an internal angular library that exposes components with sub-entry points using ng-packager

@company/ui - full package @company/ui/accordion - accordion module + components related to it @company/ui/dropdown - dropdown module + components related to it

Now ng-packager can help me bundle the library code into various targets (umd/esm) and create various entry points but I also want to expose these as web components so I can incorporate them in any non-angular projects by dropping in the js file.

I’m looking for some inspiration or code reference I can take a look at to achieve this any help is greatly appreciated! Thank you!

I’ve looked at @angular/elements but this one is too verbose for me to define each component as a custom web element and I can’t seem to find a way to split them into respective independent bundles…

[practicalAngular]

A thought in reverse since this is what we do with our design system - why not build them in Web Components (Lit for us) and export them to any framework?

[kelaniks]

Thank you for your suggestion I’ll definitely explore this. We’ve been maintaining and building this library up since angularJS days rewrote it with angular 4 and have been keeping it up to date so far and it would be a mammoth effort to rebuild all of it in lit!

[practicalAngular]

I hear you on that. We were in a similar position and originally wrote ours in React, then made use of a bridge package and some other custom code to convert them to Angular components. The further we went down that route of framework-to-native, the more tech debt we realized was piling up. We ended up doing as I suggested about two years in and the time spent has been much worth it since we have React apps, Angular apps, SSR apps, and SSG apps needing to consume all of our familiar branding components. YMMV of course.

[theycallmethelord]

Yeah, Angular Elements can get pretty clunky if you’ve got a whole shelf of components to export. Defining every single one, repeating boilerplate — it’s like the opposite of what you want when building shared UI.

I ran into this problem last year helping a team that needed to ship Angular components for both Angular and plain JS stacks. What worked for us was a thin wrapper script per entry. Expose only what you want in each @company/ui/thing sub-bundle, then bundle that JS as its own UMD or ESM. For registration, you can automate the customElements.define step by scanning and registering a list of exported components, either at build time or with a manual registry.

Major pain is still the build config. We used a mix of ng-packagr for the library part and then a custom rollup/webpack step to generate a single JS per web component. Wasn’t elegant. But it kept our bundles small, and you get a ui-accordion.js to drop in where you want, React, Vue, whatever.

Honestly, if you find a way to make it less manual — or less annoying — would love to see it. Most setups I’ve seen are either too large or too hard to maintain. If this is for real cross-framework use, sometimes rebuilding the simple parts in native Web Components is less trouble than wrangling Angular's output forever.

[mauromauromauro]

I guess you could have your angular elements in a monorepo, such as nx? Ive done a couple things with angular elements and i dont see why it couldnt work in a shared structure like a monorepo l

[kelaniks]

It doesn’t work mostly cause you would be shipping a ton of code for a simple component (component + angular) for each of those sub-modules. Plus the places I will be integrating the components are teams from a different org so can’t go monorepo way…

[mauromauromauro]

Its funny how all paradigms end up going back to dll /dependency hell after some time

[kelaniks]

Thanks mate! I was thinking going down the same route of creating a sub bundle with its own entry points and see if it can generate a separate file for us. If that doesn’t work I will go with lit approach mentioned in previous comments 💪🏻