How to share a Host service with MFEs without relying on shared library ?

[Chandra01B]

Is there is a way to share an angular service from Host with all its MFEs. Creating a separate library would add additional maintenance overhead in my use case. I trying to avoid that.

Host webpack.config.js:

name: "host",
filename: "remoteEntry.js",
exposes: {
    './SharedService': './src/app/host-shared.service.ts',
}, 

But I am not quite sure how to consume this in my MFE. Here is my configuration.

MFE webpack.config.js:

remotes: {
  "host": "host@http://localhost:4200/remoteEntry.js",
}, 

When I try to inject it my MFE component, typescript/angular compiler throwing the error as expected from my import statement.

import SharedService "host/SharedService" 

Error : Can't find the module 'host/SharedService' or its corresponding type declaration. 

So I tried to define a definition for it in my decl.d.ts file as follows.

declare module 'host/SharedService';

Now I get a different error

'Can't use namespace 'SharedService' as a type

This is also make sense and expected.

How can I tell angular compiler that this SharedService is going to be available during the runtime and comes from MFE dependency injection in standalone and it comes Host dependency injection when accessed from Host ?

[dkhrunov]

Hello, @Chandra01B !

You are not looking for easy ways! I think it's better to make a separate library and share it. There is a big, in my opinion, nuance in your approach, now you have a two-way dependency, your host application depends on the remote application, and in turn, remote applications depend on the service from which you are trying to share under the host application, this is not the best architectural approach.

[Chandra01B]

Thanks for your response. If we were to put aside that it's not a good architectural pattern, is it technically possible to access a angular service very similar to accessing a component from remote ? How would I able to covert a es module into a angular service during the runtime ?

[dkhrunov]

Thanks for your response. If we were to put aside that it's not a good architectural pattern, is it technically possible to access a angular service very similar to accessing a component from remote ? How would I able to covert a es module into a angular service during the runtime ?

You can, create a library and share it across all apps (host/remote) by using Webpack Module Federation plugin by providing in share config field your lib, you use nx monorepo?

For instance my example project

(If you are using nx monorepo all your libs and npm dependency automatically shared across apps nx mfe doc)

[picup-christian]

@dkhrunov what about sharing a library when things are not in a mono repo? I'm attempting to do this via a distributed repo but I'm struggling quite a bit.

[dkhrunov]

@dkhrunov what about sharing a library when things are not in a mono repo? I'm attempting to do this via a distributed repo but I'm struggling quite a bit.

In you architecture (distributed repo I mean), I think, you have only one solution - create a npm package and register it as a shared library with module federation inside webpack config.

Or if you can then try migrate to a monorepo and create a traditional MFE application.

You can also try to simulate the monorepo using symlinks, but I'm not sure.

UPD: here described common pitfalls with sharing libs and described issues with Sharing Code and Data https://www.angulararchitects.io/aktuelles/pitfalls-with-module-federation-and-angular/