Front end "micro services" with Angular 2

Question

I'm looking for a solution for a bit of an odd situation. Let's take a quick look at the angular2-seed project so I can better explain: https://github.com/mgechev/angular2-seed/tree/master/src/client/app.

In that project, we have 3 isolated modules - about, home, shared. What I am looking for is a way to isolate development of these, so we're ultimately able to release each piece independently. For example, say Team A is working on the about section, and Team B is working on home. Work is complete for each, and we're ready to release, however we realize the about section is missing a critical piece of functionality, however we still want to release the change to the home section. What we're looking for is a way to achieve this.

Here are some solutions already explored, but I'm not really happy with:

• Have completely different applications for home/about (in my eyes, this eliminates many of the benefits of a SPA).
• Have each module (about, home, shared) roll up into it's own NPM package. When we go to deploy, we would have some way to orchestrate pulling in all the published NPM packages for these modules.

Answer 1

Orchestration:

Have each team build a component library (NPM) and pull those into a single Angular 2 application. That way, the teams can develop using microservices principles, but you can deploy a SPA monolith which reduces complexity.

Large component libraries should have multiple bundles and modules so you can be selective about what you pull in.

Communication between microservices:

If necessary, the component libraries can communicate over a back-end message bus.

If direct client-side integration is required between the component libraries, then you need a 3rd component library that about and home depends on, which contains a light-weight injectable message/event service. You can implement that service using RxJS Subjects.