Sharing Services Between Hybrid Apps

[ng-druid]

I've been conducting a lot of experimentation with web pack 5 module federation. Having successfully been able to use angular as an app shell for other other angular apps. I have also been able to have angular act as an app shell for react. When orchestrating micro-frontends created in angular it is easy to share services given the injector is shared between the embedded apps. However, this is not the case with say react where there is no di system. I have been considering for some time how to best share services from the angular app shell with micro-frontends created with other frameworks like react to start. This seems like it might fit the bill. Has anyone conducted this type of experimentation of sharing angular services with federated modules that are created in other frameworks like react.

This is an example of the micro-frontend that acts like an extension to add a new plugin to a service defined inside the app shell. I would like to be able to do the same exact thing with other frameworks like react.

https://github.com/rollthecloudinc/workflow-designer/blob/master/projects/mfe1/src/app/download.module.ts

export class DownloadModule { 
  constructor(
    cpm: ContentPluginManager,
    downloadHandler: DownloadContentHandler
  ) {
    console.log('register mfe1 download content plugin');
    // @todo: lint not picking up register() because in plugin module base class.
    cpm.register(mfe1DownloadContentPluginFactory({ handler: downloadHandler }));
  }
}

The ContentPluginManager is part of the shell app. However, the injector is shared here since both apps use the same exact Angular version and our framework core library versions.

Perhaps when a service is registered with the angular di system it could also be registered with this di system as well. That would than make the service available to any app that uses this di system regardless of framework, right. The intention is to be able to register plugins from outside projects without requiring users to use Angular. Effectively enabling devs to create completely separate projects that provide extensions for the app shell plugin system and potentially provide their own plugin definitions. However, none of that is possible at the moment unless using angular because it is all tightly coupled to sharing services via the angular di system which is not available in other frameworks like react.