Loading modules from different server at runtime

Question

Is it somehow possible to load different modules in my angular 2 app runtime, from different servers and if so, how can I achieve this?

I would like to have my app load different components from the overall application from isolated servers (A, B, C), so they can be taken down and updated independently from the main app and any components which are included in A, B or C won't be loaded. The 3 modules shown on the bottom would have the Components, but the Main App would declare in it's HTML where it should load the component.

UPDATE

Lazy loading through routes is not what I'm looking for, the 3 modules should be completely independent modules which have their own repository, project, hosting, enz.

You can try to load ES6 modules dynamically with SystemJS or Webpack `require.ensure`. A2 handles this through lazy loaded routes, no other way. 'not what I'm looking for' suggests that you haven't designed the app properly to handle this situation with router. Without good reasoning it looks more like XY problem rather than anything else. — Estus Flask, Mar 22 '17 at 15:13
@estus, can you elaborate a bit on how this could work using that webpack function? In angular 1 I could tackle this problem by finding the module from the main app in script A, B, C and declaring the controllers, directives and services in that way. — Myth1c, Mar 23 '17 at 09:48
[`import`](https://webpack.js.org/guides/code-splitting-import/) will likely do better. `Promise.all([import('modA').catch(noop), import('modB').catch(noop)]).then(([modA, modB]) => ....@NgModule(...import: [modA, modB])...) class MainMod{}`. Again, this looks like design problem, and you will likely have numerous problems with this approach even if it's possible. The right way to do this is component router and lazy routes. — Estus Flask, Mar 23 '17 at 11:44
@user3757628 This wasn't my question, I was the last to edit the question, and all I did was remove a tag that didn't apply to the question. I wasn't involved in the problem or in offering any solutions. — Claies, Nov 08 '17 at 15:13

score 10 · Accepted Answer · answered Jun 26 '17 at 13:31

A little late, but you can use the lazy-loading mechanism in routes to do exactly what you want.

This article states on how to load a webpack module from another source: Solution: load independently compiled Webpack 2 bundles dynamically

In the routes you define a callback in the loadchildren section:

const appRoutes: Routes = [
    {path: '', component: MainComponent},
    {path: 'modulea', loadchildren: loadModuleA}
]

the loadModuleA method would look like:

export function loadModuleA() {

    return new Promise((resolve, reject) => {

        // the method from the article
        loadPlugin('path/to/server/of/moduleA', (exports) => {
            // The Submodule must export ModuleA
            resolve(exports.ModuleA);
        });

    });

}

i could not get this to work... says "cant read prop of loadchildren of undefined" — Nate, May 15 '18 at 16:01

Loading modules from different server at runtime

1 Answers1

Linked