Load external Angular 2 component/module in runtime

Question

Anyone know if it's possible to load an external js file containing an Angular 2/4 module/component?

If so, how do you do, and how is that component/module compiled to that external js?

you can look into this -https://stackoverflow.com/questions/40706572/angular2-lazy-loading-of-component-without-router-or-import — Aniruddha Das, Sep 13 '17 at 17:19

score 1 · Answer 1 · answered Sep 13 '17 at 17:22

LoadChildren in routing is one of the best way used to load module and components in to angular project. If you are using cli, webpack will build your modules seperatly and they will be loaded dynamically at run time using router.

const routes: Routes = [
  { path: '', loadChildren: './some-folder/private.module#PrivateModule'},
  { path: 'login', component: LoginComponent }
];

Here for the blank route the private module, private component will be loaded dynamically.

I would like to show a bunch of externally loaded components on the same page. — bjorkblom, Sep 13 '17 at 19:14

score 0 · Answer 2 · answered Sep 13 '17 at 17:25

0

It is possible. Look here: https://blog.thecodecampus.de/angular-2-dynamically-render-components/ Instead of entering entryComponents array upfront I would try to do some magic with require('path_to_component').default .

answered Sep 13 '17 at 17:25

proti

213
3
11

Using require will include the component in build time – bjorkblom Sep 13 '17 at 19:12
Indeed, however it will give you ability to config components to use e.g. in JSON config file etc. – proti Sep 13 '17 at 20:46

Load external Angular 2 component/module in runtime

2 Answers2