0

I have a requirement to add a dynamic component to the Angular application. The idea is to bundle the component in one JavaScript file which will be downloaded on some condition.

The whole idea is to ship independent components(features) as and when they are ready. They should work with application seamlessly without recompiling the main application.

I did look at https://angular.io/guide/dynamic-component-loader. But the example compiles the dynamic component along with the solution which I won't be able to do.

Any idea how I can achieve this?

Abhishek
  • 621
  • 1
  • 8
  • 19
  • Could you please elaborate more about the requirement ? – Jameel Moideen Sep 04 '18 at 02:46
  • The whole idea is to ship independent components(features) as and when they are ready. They should work with application seamlessly without recompiling the main application. – Abhishek Sep 04 '18 at 02:58
  • I strongly suggest using the fractal pattern that's often favored by the ReactJs/Redux community. It lets you ship out changes that minimally impacts the solution as a whole. Also, why would you need to "ship" a web application? Isn't it on your dev/qa/prod servers? Or is this a commercial product? Both have certain contexts, but neither would be served well by introducing a plugin framework that actually does not contain true plugins. – code4life Sep 04 '18 at 03:29

1 Answers1

0

Unfortunately Angular need the component dependency to be specify in the module before build.

There are couple of good read about , how to load the components at run time using system js but there is no well defined documentation. It's possible but challenging.

https://github.com/kirjs/angular-dynamic-module-loading

https://github.com/nmarra/dynamic-module-loading

Load new modules dynamically in run-time with Angular CLI & Angular 5

Also I would like to share an interesting link Single-SPA framework , which help you to load multiple application regardless of Angular,React,Vue etc without IFrame.

https://single-spa.js.org/docs/getting-started-overview.html

In your case you can load multiple angular application which you can keep as an independent deployment package .

Jameel Moideen
  • 7,542
  • 12
  • 51
  • 79