How to use shared service in angular module fedaration without Nx

Question

Angular Module Federation Shared Services from angular library not sharing same instance(not working as singleton)

Hi,Im new to Angular Module Fedaration. Trying to communicate between the fedarated apps using a service I have created 2 separate angular project Host(Project 1) and Remote(Project 2) (Im not using Nx) I have created a separate angular library called as ezy-data-lib which as service class

Angular 15

webpack config of host

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const shareAll = mf.shareAll;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  [/* mapped paths to share */]);

module.exports = {
  output: {
    uniqueName: "host",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },

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


    }),
    sharedMappings.getPlugin()
  ],
};

webpack config of remote

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;
const shareAll = mf.shareAll;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  []);

module.exports = {
  output: {
    uniqueName: "eRemote",
    publicPath: "auto"
  },
  optimization: {
    runtimeChunk: false
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    }
  },
  experiments: {
    outputModule: true
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },

      // For remotes (please adjust)
      name: "eRemote",
      filename: "remoteEntry.js",
      exposes: {
        './AppModule': './src/app/app.module.ts',
      },


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

    }),
    sharedMappings.getPlugin()
  ],
};

I have built a angular library and installed in both host and remote and I have imported in appModule of both projects

Im trying to update a value of library service in host and trying to print the updated value in remote

Since Im using shareAll expecting to share same of ezypdatalib service

However followed the documentation and tried following steps updated a tsconfig.json for path in both host and remote

   "paths": {
      "ezyDataLib": [
        "./node_modules/ezy-data-lib/public-api.d.ts"
      ]
    }

updated webpack config

sharedMappings.register(
  path.join(__dirname, 'tsconfig.json'),
  ['ezyDataLib']);

updated all the imports with ezyDataLib ended up with following error assertion failed

reverted back the import and updated with ezy-data-lib above error got fixed but failed to share same instance

instead of using shareAll tried with share updated webpackconfig in both and host


      shared: share({
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto', includeSecondaries: true },

        ...sharedMappings.getDescriptors()
      })

still failed to share same instance

tried reverting back to shareAll and updated option with eager loading but still didn't work

also the problem with shareAll

any input on the above code will surely help a lot

Questions How the remote module is loaded and how the value is updated ? on click of button in host updating value of lib service and using loadRemoteModule() from '@angular-architects/module-federation' loading the remote and trying to access the updated value in remote

Thanks in advance

How to use shared service in angular module fedaration without Nx

0 Answers0