How to compile your Angular components library into Web Components

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

There are many articles and talks about Angular Elements. They say that it is easy to compile Web Components and use them on the page without Angular application.

But people consider a rather utopian situation: we make a separate project, create an Angular component, configure the project to build Angular Elements, and finally compile several JS files that we can use on a usual web page. Yay, the component works!..

In practice, you have a working Angular project and want to compile its components to Web Components. And do it in a way that does not affect current development and use of your Angular project.

I wrote this article due to a similar situation. I had to compile the Angular UI components library into a set of native Web Components.

Prepare your modules

A typical module for compiling Angular Elements looks like this: