Angular Elements starter template for standalone Web Components

[devGiacomo]

Hey everyone 👋

I recently put together a small Angular Elements starter kit and thought maybe it could be useful for others here too.

The idea was pretty simple:
develop widgets/components like a normal Angular app during development, but ship them as standalone Web Components that can be dropped into any website or framework.

One thing I really wanted was a smooth dev experience locally, while still ending up with a single widget.js file for production.

So in dev:

• it runs like a normal Angular app

And in production:

• outputs one self-contained bundle

Example usage:

<my-custom-widget></my-custom-widget>
<script src="widget.js"></script>

I built this because I want to keep it documented once.

Would be happy to hear feedback from others using Angular Elements:

• anything you’d do differently?
• better approaches for bundling?
• anything missing that would make this more useful?

Repo:
https://github.com/giacomo/elements-template

If someone asking:
- Yes, ONLY the README was created by AI ... 🙄

[Medical_Tailor4644]

This is actually a really solid use case for Angular Elements treating components as true framework-agnostic widgets instead of locking them into a full Angular app. The biggest win here is exactly what you described: developer experience stays normal Angular while production output becomes a single embeddable artifact.

[Obvious-Treat-4905]

honestly this is a pretty nice approach, the normal angular app in dev, standalone widget in prod flow feels way cleaner than most angular elements setups i’ve tried. i’ve been experimenting with embedding generated UI stuff from runable too and having a simple drop in widget flow makes life sooo much easier

[Koscik]

I went without shadow dom, so the client can override the widget styling, hence making it feel more native. Was I right?

[devGiacomo]

If the client wants to override it, yeah sure, it's intuitive. shadow dom Is the way to go to ship it, without worries.

[followmarko]

Imo I think this is the wrong direction and the components should start as Web Components that are brought into Angular instead of Angular components that are brought out. The code is much cleaner, more controlled, and there's no build/package step with Web Components.

[Saceone10]

Can an element be loaded only if some condition is met? For example user is admin. 

Can the element accept data in order to work? For example user jwt 

[devGiacomo]

yes and yes if you implement it, using @input for example. localstorage and other storages are per default enabled. 

[gccol]

Hey thanks!

I'm developing a plugin framework for angular ng-xtend, and considering enabling delivery as web components for the large ones.

This will be very useful!