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.

Mccarthy

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. – Calico

@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. – Mccarthy

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. – Calico

did you resolve the problem? @Claies – Manatarms

@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. – Jujutsu

did you resolve the problem? @Mccarthy – Manatarms

Answer 1

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);
        });

    });

}

Holsworth

i could not get this to work... says "cant read prop of loadchildren of undefined" – Domination