How to dynamically load external angular 2 module (like served from an external module.bundle.js)

Question

I can dynamically load local modules as someone else did in the plunker here. But how do I load an external module, lets say from a separate bundle js served by another service. In the example plunker, src/app.ts has:

  constructor(private viewref: ViewContainerRef,
      private resolver: ComponentFactoryResolver,
      private loader: SystemJsNgModuleLoader,
      private compiler: Compiler){
        this.module = new ModuleNode();
        //can I make this a non-local script reference somehow?
        //like to http://example.net/external.module.bundle.js
        this.module.modulePath = "src/dynamic.module#DynamicModule";
        this.module.componentName = "TestComponent";
      }

Is there any way to achieve this?

EDIT: To clarify, the scenario is that a group of microservices (built, deployed, etc. independently) are making a spa. So my microservice wants to dynamically load a component/ module from a bundle.js served by another microservice. This is why I don't have the module/ bundle at compile time. The only contract between the two microservices is the url to the bundle file. If they update the component/ module, a hard refresh should reflect the changes without a re-deployment of my microservice.

You can't load modules individually from another bundle because you are loading the entire bundle. Why not map the module to your SystemJS config? — Paul Jerome Bordallo
– Paul Jerome Bordallo, Commented Mar 15, 2017 at 2:09
@PaulJeromeBordallo Edited the question to more clearly explain the use case. Thanks for the response. — AzureMinotaur
– AzureMinotaur, Commented Mar 15, 2017 at 2:35
Are you still using the version 2 of angular? Still interested in a solution? — Mehyar Sawas
– Mehyar Sawas, Commented Oct 24, 2022 at 10:21

Ricudo · Accepted Answer · 2024-03-05 00:43:47Z

0

The first answer which come into my mind is angular-architects/module-federation but I'm pretty sure it won't work with Angular v2. The only solution I see for such an outadated version of Angular is to use Webpack to handle you projects buildings and use its module federation feature.

answered Mar 5, 2024 at 0:43

Ricudo

3451 silver badge6 bronze badges

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

Comments

Mansi Mistry · Accepted Answer · 2025-04-09 07:38:23Z

0

Expose the remote module as a global variable

// Inside external Angular app import { DynamicModule } from './dynamic.module';

(window as any).externalModules = { dynamic: DynamicModule };

answered Apr 9 at 7:38

Mansi Mistry

1891 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to dynamically load external angular 2 module (like served from an external module.bundle.js)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related