[Fixed] Wrong module loaded on webpack federation with angular

Issue

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;
}

 

Solution

I found a solution here.

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