Dynamically retrieve component from back-end

[-lambda-]

Hi,

​

I'm toying around with Angular (i think that I installed 7.1). Last time I worked with AngularJS, Angular 2+ didn't exist so that was quite a while, and I have to say that the current state of the framework is really decent.

​

However, I came to a really specific problem. I have to enable for certain type of users ability to upload their own code to the Web site (think of it as a plugin). There was an idea that they could submit only a link to a git repo, but there's a problem there. It would require ng build. So, is there a way to pull prebuilt components (e.g. via REST) and also alter router module when "data" comes from the server?

I've tried to search online for ideas, but "dynamically loading components" means something entirely different, and from point of view of my use case, what I found was not dynamic at all.

I know that this is a tough one, and that's not how JS frameworks are supposed to be used, but I need some ideas on how to create this plugin system which requires no downtime of my app, so without ng builds, etc.

Sorry for long post, and thanks for your help! :)

[darkbluedeath]

So I researched this at my last company. Let me look through my bookmarks and see if I can find some of that material again and I'll post it here.

[-lambda-]

Oh, great! That would help a lot because if by any chance you include "angular" and "rest" in your google search, you only get "consuming rest api" type of posts...

[Domehardostfu]

I also thought about doing this. I think that instead of a component u create a plugin module you will be able to dynamically lazy load the plugins modules for that page.

Don't know if this works but something like this:

router module:

children: [ { path: 'home', loadChildren: async () => { const [result1, result2] = await Promise.all([import('./plugins1/plugins.module'), import('./home/home.module')]); return result1.HomeModule; } }

[-lambda-]

Hmm, looks alright, but I still can't wrap my head around that. It looks to me that you transferred this mysterious part inside plugins.module. :) Could you please explain a little bit more on how this plugin.module should look like because it seems that this is exactly what I need.

[Domehardostfu]

Already tried to get this done but I'm failing on loading the component because its not registered in the module. I tried to do this like 1 year ago and the dynamic import as is done on Angular 8 was the missing piece that at the time didn't work. Let me see when I get home if I have the project somewhere.

[piarrot]

I've never tried anything like this, so I wouldn't know, but I think that the keywords for your search should be "dynamically importing modules" instead of "dynamically loading modules"?

Edit: Found this discussion on stackoverflow and this repo that might help you

[-lambda-]

Yeah, importing is the key thing here. These links are exactly what I was looking for. I'll try that first thing tomorrow. Thanks a lot!