I have a custom library not part of mono-repo, it is in it's own workspace and I have Micro front end & a shell that as well resides in a different repositories and I want to share the data between the shell & the microfront end using the AuthService inside my custom library.
It looks like ModuleFederationPlugin is not supporting to share the custom library not part of mono-repo, the AuthService in the library is always getting re-initialized and I am losing the data.
I have used below tutorial to create & share the library, but I have the library reside in a different workspace not like how the tutorial is done:
Shell:
sharedMappings.register(
path.join(__dirname, 'tsconfig.json'),
['my_auth_lib']);
module.exports = {
output: {
uniqueName: "shell",
publicPath: "auto"
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"my_auth_lib": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
})
}),
sharedMappings.getPlugin()
],
};
MFE1:
sharedMappings.register(
path.join(__dirname, 'tsconfig.json'),
['my_auth_lib']);
module.exports = {
output: {
uniqueName: "itemMfe",
publicPath: "auto"
},
optimization: {
runtimeChunk: false
},
resolve: {
alias: {
...sharedMappings.getAliases(),
}
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
library: { type: "module" },
// For remotes (please adjust)
name: "itemMfe",
filename: "remoteEntry.js",
exposes: {
'./ItemModule': './src/app/item/item.module.ts'
},
shared: share({
"@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
"my_auth_lib": { singleton: true, strictVersion: true, requiredVersion: 'auto' },
...sharedMappings.getDescriptors()
})
}),
sharedMappings.getPlugin()
],
};
I have two tsconfig.json of my shell & microfront end and I have below code:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2020",
"module": "es2020",
"lib": [
"es2020",
"dom"
],
"paths": {
"auth-lib": [
"../angular-library-workspace/projects/my_auth_lib/src/public-api.ts"
]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
how do i share the AuthService userName data between the shell & Microfront end that are residing in different repositories & my Library residing in it's own workspace ?
Any help is appreciated.