Angular2 composure

Question

I'm looking into microservices and to be more exact Angular2 microservices. The main idea seems easy enough but it gets complicated as I want to make a composure of different Angular2 apps.

What I mean by this, imagine I have 2 apps which I don't have a lot of control over, app A and app B, created by different teams, each one serving a different thing (one might be a 2D viewer, the other a 3D viewer). I was thinking of building some kind of composition proxy in which I define a html file with some custom tags such as <service target = "url"> and then have the proxy make a composition and serve it to the user.

I've been researching the web for a while now and I can't seem to find anything on angular2 compositions. Here are a few of the problems I encountered :

• The order of the included scripts. Since each app might require different scripts to be included, not including them in the right order might crash the entire app.

• Building a totally new "core" component that is properly bootstrapped, having only the right components being bootstrapped and all that.

• Making sure css from one app doesn't overwrite css from the other

• Naming issues, since apps are different I might encounter components with the same name.

All those issues seem fixable to me by just parsing every file and modifying it accordingly. Problem is the same idea won't exactly work if the js files are both minified and unified. Also it would take a lot of processing power to do this for every request (I'd like it to be a bit hot-builded/loaded).

What are some ways I should go about building such a composition proxy and is there any examples/documentation on how to do this?

Answer 1

I am not sure I understand what you want to do but I can see from your requirement all you need is out of the box Angular2 functionality.

1) The order of the included scripts. Since each app might require different scripts to be included, not including them in the right order might crash the entire app.

2) Building a totally new "core" component that is properly bootstrapped, having only the right components being bootstrapped and all that.

3) Making sure css from one app doesn't overwrite css from the other Naming issues, since apps are different I might encounter components with the same name

I'll answer to your points:

1) You just use dynamic module loading in you "app-routing", like the following:

export function loadModuleA() {
    return System.import('./pages/module-A-view/a.module').then(mod => mod.ModuleA)
}

export function loadModuleB() {
    return System.import('./pages/module-B-view/a.module').then(mod => mod.ModuleA)
}

export const routes: Routes = [
    {
        path: 'core/sectionA',
        loadChildren: loadModuleA
    },
     {
        path: 'core/sectionB',
        loadChildren: loadModuleB
    },

If you import a library in ModuleA is not going to be available in ModuleB unless you explicitly export it each module A and module B will have their own dependencies

2) you specify your "core" as you main app.module.tsand module dependencies in their own module file, simple.

3) you only need a main stylesheet really, then every component can have their custom files. If you use angular cli, for example every time you create a new component, the cli will generate the component file, the scss file, the html file and the spec file. Otherwise you can just as easily do it yourself:

@Component({
    selector: 'whatever',
    templateUrl: './whatever.component.html',
    styleUrls: [ './whatever.component.scss' ]  
})
export class WhateverComponent

If you instead wanted a StyleSheet specific to all components of (let's say) Module A, then I don't know how to do that.