Sharing a custom remote "my_auth_lib" library - Module federation Plugin doesn't work to shared remote libraries

Viewed 97

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:

https://github.com/angular-architects/module-federation-plugin/blob/12.0.0/libs/mf/tutorial/tutorial.md

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.

0 Answers
Related