[Fixed] Wrong module loaded on webpack federation with angular


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.

enter image description here

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;



I found a solution here.

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

Leave a Reply

(*) Required, Your email will not be published