After many days and hours dealing with Angular Elements work, I've learned a thing or two about extracting an Angular Component to a Web Component and making it available everywhere.
It started where all research should start, the Angular Documentation. It says to install @angular/elements, how to pass data from and to the Web Component, and how to transform it using the createCustomElement() method inside the AppComponent 🚩. I've followed all the steps, but for some reason, it didn't work.
Quite a cryptic error message, not cool. It doesn't say anything useful at least to start troubleshooting this. So I looked in the interwebs to see if anyone has dealt with this before, and it seems to be something related to zone.js being missing. Weird, since I'm pretty sure it's in my angular.json config.
So, after trying desperately I've found out something that must be in the first couple of pages of "Javascript for Dummies". The order of the imports, matters.
Polyfills will be used by main.js, therefore I swapped them out. New error!!! #Success
"ie[E]" is the clue here, if I want to know what is not a function, I should disable the minification step from the building process, at least, temporarily. So let's build it with --configuration development and see what we get.
That's some progress right there! and it makes sense. The documentation states to make the conversion from Angular to Web component in the AppComponent but this is not right, because when we take the compiled files to a simple HTML file, it won't have the element. There must be a better way.
After talking to my therapist (ChatGPT) about this, it suggested I modify the main.ts file to bootstrap the application on the component I want to convert and then convert it.
Most of ChatGPT's responses are ~90% correct. Now I have to take a deeper look and see where is that missing 10%.
Something is off, the application bootstrapping doesn't make sense. I don't need to configure the app to make the conversion. Is there a way to create a "blank" application? It seems there is!
We can create an application without bootstrapping any components, that's great. Let's implement it.
Bingo!
This is a simple implementation of the Angular Element as a Web Component and how to listen to the EventEmitter.
Pass data from and to the element.
To send data to the component we use custom attributes with the same name as the input configured in the component.
To listen to events, the event name should be the same as the output name in the component.
As always, I hope you can take anything useful from this and I'd like to know your thoughts.
Feel free to reach me on LinkedIn or X (Twitter) . 👋🏻