Creating Framework Agnostic Apps with Angular Elements

Share on facebook
Share on google
Share on twitter
Share on linkedin

Browsers are becoming more and more powerful. Browsers are now able to do what was previously only possible with native apps,  and web apps that take advantage of the modern browser capabilities go under the name Progressive Web Apps. This includes a browser specification that enables browsers to have functionality such as offline availability, hardware support, and Bluetooth. Also, new browser specifications are enabling what was previously only available for SPA frameworks to the browser natively using web components that are encapsulating functionality and styling with techniques such as shadow dom and creating web components using custom-elements.

What is custom-elements? Custom-elements is part of the web component standard and is custom HTML tags that encapsulate functionality and styling. It is the browser-native implementation of what Angular is doing with javascript rendered components, just running natively and framework agnostic in the browser!

Angular has created a library for converting components into custom elements. This enables us to write components using the Angular framework and run the component in non-Angular applications. That way you can mix different front-end frameworks, as it all gets compiled to custom-elements.

Let’s see how easy it is to convert an Angular component to a custom element.

Converting an Angular component to a custom-element using @angular/elements

We are gonna create a simple demo of an Angular app by creating a component and using it to create a custom-element like in my Github demo.

The first step is to create a new Angular CLI project:

ng new angular-elements-demo

We need to install Angular elements:

npm i --save @angular/elements

And install some polyfills for web component browser compatibility:

npm i --save @webcomponents/custom-elements

And add the following lines to polyfills.ts:

import '@webcomponents/custom-elements/src/native-shim';

import '@webcomponents/custom-elements/src/custom-elements';


Hereafter you create a new component, that will later become a custom-element.

ng g c hello

Make sure to set ViewEncapsulation to native since we are to be working with custom-elements.

In the HelloComponent‘s decorator:

encapsulation: ViewEncapsulation.Native


For making Angular elements outside of Angular you need to change a couple of things in the AppModule:

  1. The HelloComponent is the component we want to create a custom element from. To do this we need to add it to declarations and entryComponents because the component is being created programatically (not created in a template).
  2. We want to use our custom element as our bootstrapped component, so to do this we need to setup the ngDoBootstrap lifecycle hook. Also we need to ensure that AppComponent is removed from the declarations and bootstrap properties in the decorator of AppModule.
  3. In the ngDoBootstrap create a new custom-element using createCustomElement. Make sure to provide the injector.
  4. Define the custom element using define. Here you specify the custom-elements HTML tag and the custom element to create.

Now when the app runs it will run a custom-element. You can remove everything from index.html and only specify the custom element as:


And you should see the HelloComponent being rendered!

The benefit of this is that this custom-element can be rendered in any framework now, as long as the compiled javascript bundles are provided. It is possible to run this app inside a React app and also there might be some performance benefits because of how browsers optimize for running web components vs running a javascript framework.

Publication of custom-elements

Unfortunately the way to use a custom elements created with Angular Elements is to build the bundles with ng build --prod --output-hashing=none and concat all the js files into one. Currently this creates  a pretty big bundle size, especially for an App that just displays some text. For this reason, it might not be reasonable to use Angular Elements in production yet.

Angular v7 and the Ivy renderer should make the published bundle of custom-elements created with Angular Elements even smaller, making this more useful in production. Also as the custom-element standard gets implemented in more browsers polyfills might not be needed anymore.


We discussed the benefits of creating framework agnostic apps using Angular Elements and saw how easy it is to convert an Angular component to a custom-element. Still, the technology has some drawbacks in a big bundle size and the need for polyfills to ensure browser support for custom-elements.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

Walkthrough: Building An Angular App Using Tailwind CSS and Nx

In this video, we will cover a walk-through from scratch covering how to Build and Angular app using Tailwind CSS and Nx including Angular standalone components. 🖌 Tailwind CSS setup and usage⚙️ Nx monorepo configuration🧍‍♂️ Standalone components✅ Building a complete app in less than 2 hours with best practices ⏳ Timestamps:0:00 – Intro1:00 – Tailwind

Read More »

18 Performance Optimization Techniques For Angular Applications (podcast with Michael Hladky)

Performance is extremely important in front-end applications as they directly impact the application’s user experience. Poorly performing applications can be frustrating for the end-users. For example, an e-commerce site that is slow and unresponsive might deter users which could have a direct impact on the business.  Although there is a growing number of tools to

Read More »

Announcement: Angular Testing Workshop

I’m announcing a new live workshop: Angular Testing Workshop. It will be half-day workshops over three days, 100% online, where we will learn all the industry best practices with Angular testing so you can apply them in your daily work – taking straight out of my experience with doing Angular testing for big projects. The

Read More »

Server-side Rendering (SSR) with Angular Universal

As the name suggests, Single-page App (SPA) is a single HTML document that can be initially served to the client. Any new views required in the application can be created by using JavaScript solely on the client. Besides this, the request-response cycle still happens, but only to RESTful APIs to get static resources or images.

Read More »