Search code examples
angularangular-dynamic-components

Dynamic Angular component


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?


Solution

  • 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 .