Angular › Angular Elements (Web Components)

How would you build and bundle an Angular Element so it can be embedded as a single standalone script on any website?

Advanced

Answer

You configure your build to produce a single JavaScript file containing your component along with all of Angular's necessary runtime code, then any website can simply include that one script tag to gain access to your custom element, without needing to install or configure Angular themselves.

// A simplified build script producing a single bundled file
ng build my-widget --configuration production --output-hashing none

// The resulting file can be included on any site with a single script tag
// <script src="my-widget.js"></script>

Real-world example A software vendor ships a single JavaScript file containing their entire feedback survey widget as an Angular Element, letting any customer add it to their website with just one script tag and no build process of their own.

Common follow-ups: How large does this bundled file typically end up, and why does that matter?;How would you support multiple different Angular Elements on the same page without conflicts?

Build Environments & Deployment;Micro Frontends with Angular