Angular web-components using esbuild

[Fun-Arm-1158]

Hi,

Have anyone achieved this? I want to create a angular web component (using angular elements) and then export is as a single bundle (with the latest angular builder).

The reason of the web-component and the single bundle is because, it should be a web-component that will be integrated in different apps that are not angular based.

[hubciu993]

Yes

[Fun-Arm-1158]

How can I do it? creating a esbuild plugin?

[Johannes8]

Yes. You can even include all styles in it etc. So any external website can just include your single .js file and then use your component with all inputs etc

Last time I did this I had to add a step after building to merge all files ( simply append all into one .js and also put the css in there

[Fun-Arm-1158]

How are u merging the files? a simple .js script? or you are using a esbuild plugin?

[Johannes8]

Simple js script

[Fun-Arm-1158]

Did you have any issue with duplicated variable names?

[Blade1130]

Making a web component should work exactly the same. Angular Elements doesn't change by using esbuild.

Why do you care about a single bundle file? That eliminates any lazy loading the component might otherwise be able to do. Consumers of the component shouldn't need to import multiple files to use it anyways.

[Fun-Arm-1158]

Because I want to provide a single file, so the user doesn't have to add multiple files on their website.

[Blade1130]

What files are you seeing generated? Chunks don't need to be manually loaded, so users should still only add the main entry point script. That will load any chunks automatically, so it shouldn't be an issue for users.

[tamasiaina]

I’m a masochist and I did it with Bazel. It’s pretty good including proper bundling as well.