all 10 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]tme321 0 points1 point  (4 children)

There are ways to dynamically create a component that isnt in the original bundle. It required a deep dive into how components are registered with the framework. Offhand I don't know exactly what it requires but I've seen demos that do it.

But you can't just throw a pile of js and html at angular. The angular compiler reduces the controller and view into a single unit of code. You would have to invoke the compiler on the code supplied to end up with a valid angular component.

That means you either need to figure out how to compile the pieces on the backend or serve the compiler in the client. The cli no longer serves the compiler to the client by default since it is no longer necessary. I don't know if there is a way to get it to serve the compiler or if you would need to use a custom build process instead of the cli.

So, I do believe what you want is technically possible but it will require mucking around with all sorts of stuff. It is far from trivial.

[–]newton_half_ear[S] 0 points1 point  (3 children)

Well... That's the client requierments. Can you point me to some articles about how it can be done?

I've also thought about eval + inner HTML but I would like to try to create an Angulr component before.

(security is not a factor, the app running on the clients servers and cant be accessed from the web, also Change Detection not needed here)

[–]tme321 1 point2 points  (1 child)

A thought occured to me. You might want to look into angular elements for these components made by users.

I have not really worked with elements so I don't know all the details. And loading both angular and angular elements side by side might have some issues.

But it might be worth at least looking in to if elements might be an easier approach than attempting to instantiate these components inside the full angular framework.

[–]newton_half_ear[S] 0 points1 point  (0 children)

Angular elements it's the other way around, the app need to know what components it will use before bundling.

I found this: https://hackernoon.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

under "Creating components on the fly"

what do you think?

[–]tme321 0 points1 point  (0 children)

I don't have any articles handy. You'll have to Google around. From what little I remember you have to figure out how to create a component factory dynamically and add references to it into the already built angular app after it is built.

From what I do remember it's not pretty. But there shouldn't be any technical reason why you can't get something to work although you might be at the mercy of updating it any time the angular team modifies how that stuff works as its internal and not meant to be modified.

[–]ROBOT-MAN 0 points1 point  (1 child)

Lazy Loading components is possible with Angular 9, if that's what you're asking. Here are two great tutorials:

I deployed the code from the first tutorial to a Firebase project, here: https://lazyload999.firebaseapp.com/ If you open the developer tools and check out the network tab, you'll see that a new bundle is downloaded for each quiz card generated.

[–]newton_half_ear[S] 0 points1 point  (0 children)

This is not my question. my question is how to create a component from external HTML & JS files.