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 -stackoverflow.com/questions/40706572/… — Aniruddha Das
– Aniruddha Das, Commented Sep 13, 2017 at 17:19

Aniruddha Das · Accepted Answer · 2017-09-13 17:22:40Z

1

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.

answered Sep 13, 2017 at 17:22

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bjorkblom Over a year ago

I would like to show a bunch of externally loaded components on the same page.

proti · Accepted Answer · 2017-09-13 17:25:15Z

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, 2017 at 17:25

proti

2133 silver badges11 bronze badges

2 Comments

bjorkblom Over a year ago

Using require will include the component in build time

proti Over a year ago

Indeed, however it will give you ability to config components to use e.g. in JSON config file etc.

Collectives™ on Stack Overflow

Load external Angular 2 component/module in runtime

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related