Dynamically load components from external content

Question

The system I'm working on consists of several distributed microservices with potentially multiple versions of each active component at the same time.

The Angular2 application I'm trying to build should be able to interact with each of these components using web maps. Since it seems impossible to prepare this application for all future versions and functions of each component, the corresponding implementation of the protocol, and even new components, I would like to assign this responsibility to the components themselves.

Each component can transmit its capabilities (in the form of the NG2 component), as well as the implementation of the protocol and the necessary GUI elements (HTML / CSS) through a packet sent over the same connection with websocket.

Is there a template that allows you to use this type of "on-demand" components and their templates in ng2?

Answer 1

I'm not quite sure if I fully understand your question.

Is there a template that allows you to use this type of "on-demand" components and their templates in ng2?

Well there is on-demand loading of modules using lazy loadable modules, see https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load I highly recommend reading this guide, it is really useful .

but they should be able to exchange services and libraries.

The Corner Guide offers a common module and a basic module for this. In fact, I think this is really the best way to do this. Just scroll down the link above.

Each component can transmit its capabilities (in the form of the NG2 component), as well as the implementation of the protocol and the necessary GUI elements (HTML / CSS) through a packet sent over the same connection with websocket.

This is the part that I’m not sure about, as if I don’t know if I understand correctly what you mean. You do not want to download the component through the connection with websocket? If so, why? If you mean only the connection for each component with the same website: I would recommend a service that will be part of the Core Module and therefore will be Singleton. Components can then access this service, and therefore they are always connected to the same website.

Answer 2

It looks like you can try using lazy router loading and provide a custom implementation of NgModuleFactoryLoader that can load components through websocket.

Answer 3

Below are the steps that can be achieved.

• use the systemjs bootloader to load the components in your router
• in the systemjs configuration file, specify the path to the component

these examples are explained in more detail.