CODEWITHSUNDEEP
angularmicro-frontendwebpack-module-federationangular-module-federation
Daniel Abhishekam
Daniel Abhishekam

Reputation: 1

Getting "RuntimeError: NG0400: A platform with a different configuration has been created. Please destroy it first." error in shell application

Both shell and MFE are built with Angular, but v17 and v18 respectively. I'm exposing the bootstrapping function of MFE to shell. When the shell invokes it, I'm getting "RuntimeError: NG0400: A platform with a different configuration has been created. Please destroy it first." Why could this be? Is it that the the shell and MFE cannot have differing versions of Angular?

Shell's webpack config uses @angular-architects/module-federation/webpack for module federation config and the shared libraries list looks like this-

shared: {
    ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

MFE's webpack config looks like this -

      shared: {
        "@angular/core": { singleton: true, strictVersion: false, requiredVersion: '^18.0.0', eager: false, version: "^18.2.3" },
        "@angular/common": { singleton: true, strictVersion: false, requiredVersion: '^18.0.0', eager: false, version: "^18.2.3" },
        "@angular/router": { singleton: true, strictVersion: false, requiredVersion: '^18.0.0', eager: false, version: "^18.2.3" },
      }

Tried toggling strictVersion on MFE

Upvotes: 0

Views: 241

Answers (1)

Daniel Abhishekam
Daniel Abhishekam

Reputation: 1

This error could occur when micro-frontend application tries to create platform that was already created by the shell. If both shell and MFE are on same angular version, this suggestion works.

In my case, while shell wants to use all libraries as singleton, MFE declares only a few as such. If the MFE does not declare a particular library (that is also used by shell) as a shared singleton, the MFE will end up using its own instance of the library instead of the singleton instance provided by the shell. This can lead to multiple instances of the library getting loaded.

The libraries in question in this scenario are @angular/platform-browser and @angular/platform-browser-dynamic.

Modifying the shared libraries configuration in MFE's webpack config to include these as singletons (with strictVersion: false, as shell and MFE are of different ng versions) fixed the problem:

'@angular/platform-browser': { singleton: true, strictVersion: false, requiredVersion: '^18.0.0', eager: false, version: "^18.2.3" },
'@angular/platform-browser-dynamic': { singleton: true, strictVersion: false, requiredVersion: '^18.0.0', eager: false, version: "^18.2.3" },

Upvotes: 0

Related Questions