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 .

Answer 2

A javascript meta-framework could work for you. Here this interesting project It takes inspiration from React component lifecycles by applying lifecycles to entire applications.

Some features:

• Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you're using)
• Write code using a new framework, without rewriting your existing app
• Lazy load code for improved initial load time.

I hope it helps you to go in the right direction.