NG0203 error for deployed microfrontend project - micro-frontend

Question

I am working on microfrontend. using module federation. shell and the remote projects have different repositories and are deployed on different servers. below are the code
shell project : calling the remote project through routing
{
path: 'analytics',
loadChildren: () => loadRemoteModule({
remoteEntry: `${environment.analyticsServerUrl}/remoteEntry.js`,
type: 'module',
exposedModule: './AnalyticsModule' })
.then(m => m.AppModule)
},
shell project : webpack.config.js
const webpack = require('webpack');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
output: {
publicPath: 'http://localhost:4200/',
uniqueName: 'o360',
scriptType: 'text/javascript',
},
optimization: {
runtimeChunk: false,
},
plugins: [
new ModuleFederationPlugin({
remotes: {
analytics: 'http://localhost:4201',
},
shared: {
'#angular/core': {
eager: true,
singleton: true
},
'#angular/common': {
eager: true,
singleton: true
},
'#angular/router': {
eager: true,
singleton: true
},
'#ngxs/store': {
singleton: true,
eager: true
},
'social-login': {
singleton: true,
eager: true
},
},
}),
],
};
remote project :
webpack.config.js :
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("#angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
path.join(__dirname, 'tsconfig.json'), [ /* mapped paths to share */ ]);
module.exports = {
output: {
uniqueName: "analytics",
publicPath: 'http://localhost:4201/'
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
library: {
type: "module"
},
name: "analytics",
filename: "remoteEntry.js",
exposes: {
'./AnalyticsModule': './src/app/app.module.ts',
},
shared: share({
"#angular/core": {
singleton: true,
eager: true
},
"#angular/common": {
singleton: true,
eager: true
},
"#angular/common/http": {
singleton: true,
eager: true
},
"#angular/router": {
singleton: true,
eager: true
},
"shared-lib": {
singleton: true,
eager: true
},
...sharedMappings.getDescriptors()
})
}),
sharedMappings.getPlugin()
],
};
individually they are working fine after deployment to their respective servers but when I am trying to open the remote project through the shell project then below error is seen in the console.
Error: Uncaught (in promise): Error: NG0203
Error: NG0203
at Fy (remoteEntry.js:1:109371)
at Nt (remoteEntry.js:1:109522)
at e.ɵfac [as factory] (remoteEntry.js:1:256984)
at R1.hydrate (vendor.c5829c2ac166cc04.js:1:4138001)
at R1.get (vendor.c5829c2ac166cc04.js:1:4135925)
at vendor.c5829c2ac166cc04.js:1:4136752
at Set.forEach (<anonymous>)
at R1._resolveInjectorDefTypes (vendor.c5829c2ac166cc04.js:1:4136736)
at new Fx (vendor.c5829c2ac166cc04.js:1:4174507)
at db.create (vendor.c5829c2ac166cc04.js:1:4175218)
at z (polyfills.b96b59aa4b290638.js:1:15990)
at z (polyfills.b96b59aa4b290638.js:1:15525)
at polyfills.b96b59aa4b290638.js:1:16838
at v.invokeTask (polyfills.b96b59aa4b290638.js:1:7185)
at Object.onInvokeTask (vendor.c5829c2ac166cc04.js:1:4191629)
at v.invokeTask (polyfills.b96b59aa4b290638.js:1:7106)
at M.runTask (polyfills.b96b59aa4b290638.js:1:2580)
at _ (polyfills.b96b59aa4b290638.js:1:9200)
as NG0203 is an error related inject() function which I am not using anywhere in both applications but still getting this error so seems something is getting injected post loading of the module. I was exposing specific module analyticsModule before but later exposed the root module appModule but still the same error. tried using preloading and other solutions give on the internet but still the same error.