Nx Stencil - Web Components for Angular - How to get started ?

[GeofoxCoding]

Hi,

my name is Richard and I'm maintaining, extending and refactoring a couple of .NET web applications for the environment government agency in south western Germany. We were starting to migrate frontend apps to Angular 2+ right from the beginning of the project. During the last year I came up with Nx and I really love the developer experience.

Now we would like to start a new architecture where we are still using smart angular components for the business logic of our apps but for smaller generic components we would like to use plain web components. Yes, we could use Angular Elements for that but actually I don't find new stuff, tutorials and features for Angular Elements, it's like the project is not very active anymore. Also Angular Elements are tight to framework magic.

So I was looking for alternative frameworks which allows to create plain web components, maybe has more fine grained options for bundling components together. Maybe I want do bundle some custom button components together and so on. Also it would be great if I could maintain my web components inside my nx workspace and directly use and consume my web components in an nx angluar application or library. Nxext stencil looks interesting but I can't get it to work in the most recent nx workspace and I didn't find very basic step by step example for this minimal use case:

1. Have an angular app in the most recent nx workspace
2. Add an angular component from an angular library
3. Add a stencil library which automaticall creates a first component for me
4. Now what do I need to do to make this web component available for the angular app or library component?

Any help would be very appreciated :)

[DominikPieper]

Hey,
yeah the docs aren't that great yet. The steps are exactly what you described. Create a Stencil library (buildable or publishable) and add an Angular outputTarget with the "nx g @nxext/stencil:add-outputtarget" generator. That generator will add an Angular lib using it with Angular usable Components. This lib you're able to use just like every other Angular lib.
Take a look at the https://github.com/nxext/nxext-demo repo for a simple example.

Cheers,
Dominik

[marckassay]

@GeofoxCoding This video should help, at least it did for me: https://youtu.be/p9NaM4_CdmQ
And in the description for that video, is a repo link.