angular lazy loading of component without router or import or loadChildren

Question

Is there a way in angular to lazy load component directly from the tag in html like <my-component></my-component>?

during component template parsing, angular should load the entire component into the browser when it finds any new tag which is not available in html or not already loaded.

I know we can load a module using loadChildren which is only specific to routing and also need to load the module and its component. I am searching only for component and directly the component not the module.

I dont want to use router or dont want to import the component ot module in my application. I want when angular2 will find a tag which is not in html5 it will search in a spcictfic folder and load the js and html file and inject that component in the specific tag

Have a look here: http://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular/38888009#38888009 — Hitmands, Nov 20 '16 at 16:46
http://stackoverflow.com/questions/40293240/how-to-manually-lazy-load-a-module — Günter Zöchbauer, Nov 22 '16 at 09:09
@yurzui The duplicate marked link is about lazy loading of module not component. I have asked how to lazy load the component without thinking about the module or anything else. — Aniruddha Das, Jun 13 '17 at 19:31
Angular doesn't support lazy loading component without module. In any case you have to create module even that will consist of only one component — yurzui, Jun 13 '17 at 19:34

score 0 · Answer 1 · answered Jun 13 '17 at 12:01

0

In your case you have to use dynamic component loading with component builder, which has limitation with AOT, Dynamic component will not work with AOT.

Dynamic component loading will find your tag and load appropriate component in DOM

answered Jun 13 '17 at 12:01

Sandip - Frontend Developer

14,397
4
35
61

Dynamic component can work with AOT – yurzui Jun 13 '17 at 12:02
Can I have article Or link where I can look. I really required to implement in my project – Sandip - Frontend Developer Jun 13 '17 at 12:04
https://stackoverflow.com/questions/40060498/angular-2-1-0-create-child-component-on-the-fly-dynamically/40080290#40080290 `For AOT compilation see these threads` – yurzui Jun 13 '17 at 12:06
@yurzui: Thanks for link, I will check and let you know if any help is required. – Sandip - Frontend Developer Jun 13 '17 at 12:11
@yurzui : the link you have given is not complete dynamic component loading, it is like dynamic html loading. I required run time component load in DOM by given "Selector". – Sandip - Frontend Developer Jun 15 '17 at 06:28
Can you create example of what you are looking for? `System.import` and then `compile.compileModuleAndAllComponentsAsync(loadedModule)`? – yurzui Jun 15 '17 at 06:32
then you can use `componentFactory.create(..., givenSelector)` – yurzui Jun 15 '17 at 06:33
find one of my question on it here : https://stackoverflow.com/q/42551380/6606630 – Sandip - Frontend Developer Jun 15 '17 at 06:33
Did you try https://github.com/shlomiassaf/lazy-jit? Main bundle will work with AOT while your factory for creating dynamic components will be loaded by demand and it won't use AOT compilation. If you create dynamically module AOT compile can't create factory for it so using AOT for this part makes no sense – yurzui Jun 15 '17 at 06:39
1

In above example you runtime add RunTimeCompiledComponent in RuntimeComponentModule with entry point define. What if i have multiple component and among that i have to add any one in "RuntimeComponentModule"? not the default one (RunTimeCompiledComponent). In my page no any predefined that this component will load dynamic, it's by configuration so any comonent can load dynamically – Sandip - Frontend Developer Jun 15 '17 at 07:15

angular lazy loading of component without router or import or loadChildren

1 Answers1

Linked