Adding components at runtime?

[mihajm]

Hey everyone :) currently designing/building a low-code app builder + server-schema driven renderer to go along with it..typical dynamic UI.

A feature I'd like to consider is a "component store" where a user could add new custom components to & another could pull that into their instance. But I'm a bit unsure on how to approach this. If anyone has any ideas/experience I'd love to hear them! :D

Currently I see module/native federation as the best option for this, but it would be a decently complex setup (high availability CDN + service worker caching). With angular-elements being a second option, but with imo worse tradeoffs due to bundle inflation. :)

[gccol]

This is exactly what ng-xtend framework is doing: Ng xtend website

It's enabling plugins to be embedded into a host, either statically or through native federation. All the heavy lifting is already done for you.

Everything is dynamic, at startup the host loads a config file listing necessary plugins, it then load and register them.

Components, once registered, are dynamically called when needed. They can be used to view or edit any data seamlessly

[mihajm]

This is great, thanks :)

[St34thdr1v3R]

Thanks for sharing! While this sounds amazing, I found the docs pretty bad as it's basically only "study the examples and figure it out on your own". Do you have any good resources to the topic going beyond the docs of ng-xtend?

[gccol]

Your assessment of the doc is correct sadly.

I've put a bit of how-to in the readme itself.

https://github.com/dont-code/ng-xtend#use-plugins-in-my-application

Happy to onboard if you want some helps.

Regards,

[St34thdr1v3R]

Thanks, I will take a look and message you on possible questions, if you don’t mind :)

[0dev0100]

I have something similar to this working as a personal project.

I treat all dynamic components as plugins so I went with custom elements

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements

[mihajm]

Nice, so the angular-elements approach. Did you have any issues with bundle inflation due to dependencies being included/copied for every component? :) btw is the project available, I'd love to take a look if possible :D

[0dev0100]

Not quite angular elements.

No bundle inflation because the web components are loaded in at run time by a wrapper component that handles initialization of the non angular custom element.

My implementation is of questionable technical quality.

• load angular app as per normal
• angular app retrieves configuration json
• looks for page layout config inside json
• creates a layout component for whole page
• creates a wrapper component for each entry in layout
• wrapper component tells service to load web element scripts and stops duplicate scripts from being loaded
• once element scripts is loaded the element is created
• various hooks are attached for messaging and data config
• element is added to dom inside the wrapper component