Wrong module loaded on webpack federation with angular

Question

I have 3 apps on ports 4200, 4201 and 4202.

On my first app (on 4200) I have a route to other apps which loads their corresponding modules, a ProfileModule, and I'm creating components based on this module's exported components. Note that my apps have the same module and exported component names.

This works perfectly but for some reason, when I change my route from an app to the other one, when components have already been loaded once, webpack retrieves the wrong module.

What I'm doing here is:

1. I'm routing to my second app (which is on 4201), it loads my ProfileModule from second-app
2. I'm routing to my third app (which is on 4202), it loads my ProfileModule from third-app
3. I'm going back to my second-app and it loads my ProfileModule from third-app instead of second-app

I guess it is due to the module names, but shouldn't it work if it's on a different remote?

Here is how I get my modules:

 async function lookupExposedModule<T>( remoteName: string, exposedModule: string ): Promise<T> { // Initializes the share scope. This fills it with known provided modules from this build and all remotes await __webpack_init_sharing__("default"); const container = window[remoteName] as Container; // or get the container somewhere else // Initialize the container, it may provide shared modules await container.init(__webpack_share_scopes__.default); const factory = await container.get(exposedModule); const Module = factory(); return Module as T; }

Answer 1

I found a solution here .

But in my case, I had the same names for different remotes in my webpack config.