Module Not Found when trying to share a service .

[piyushdanej]

Issue Report .

I am trying to share a service's singleton instance across projects but I am getting Module not found Error . I followed step by step tutorial .

tsconfig.json app level

        {
          "compileOnSave": false,
          "compilerOptions": {
            "paths": {
              "astrapay-library": [
                "dist/astrapay-library/astrapay-library",
                "dist/astrapay-library"
                // "projects/astrapay-library/src/project.ts"
              ]
            },
            "baseUrl": "./",
            "outDir": "./dist/out-tsc",
            "sourceMap": true,
            "declaration": false,
            "downlevelIteration": true,
            "experimentalDecorators": true,
            "moduleResolution": "node",
            "importHelpers": true,
            "target": "es2015",
            "module": "es2020",
            "lib": [
              "es2018",
              "dom"
            ]
          },
          "angularCompilerOptions": {
            "enableI18nLegacyMessageIdFormat": false,
            // "strictTemplates" : true
          }
        }

Shell app's webpack.config.json

            [...]
            const sharedMappings = new mf.SharedMappings();
            sharedMappings.register(
              path.join(__dirname, '../../tsconfig.json'),
              [
                /* mapped paths to share */
                "astrapay-library"   // <-- This is my shared library's name
              ]);

        module.exports = {
          output: {
            uniqueName: "shell"
          },
          optimization: {
            // Only needed to bypass a temporary bug
            runtimeChunk: false
          },
          plugins: [
            new ModuleFederationPlugin({

                // For remotes (please adjust)
                // name: "shell",
                // filename: "remoteEntry.js",
                // exposes: {
                //     './Component': './projects/shell/src/app/app.component.ts',
                // },        

                // For hosts (please adjust)
                remotes: {
                    "payment": "payment@http://localhost:3000/remoteEntry.js",
                },

                shared: {
                  "@angular/core": { singleton: true, strictVersion: true }, 
                  "@angular/common": { singleton: true, strictVersion: true }, 
                  "@angular/router": { singleton: true, strictVersion: true },
                  "ngx-toastr" : {singleton: true, strictVersion: true},
                  ...sharedMappings.getDescriptors()
                }

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

payment app's webpack.config.json

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

        module.exports = {
          output: {
            uniqueName: "payment"
          },
          optimization: {
            // Only needed to bypass a temporary bug
            runtimeChunk: false
          },
          plugins: [
            new ModuleFederationPlugin({

                // For remotes (please adjust)
                name: "payment",
                filename: "remoteEntry.js",
                exposes: {
                    './BankManagememt': './projects/payment/src/modules/bank-management/bank-management.module.ts',
                },        

                // For hosts (please adjust)
                // remotes: {
                //     "shell": "shell@http://localhost:5000/remoteEntry.js",

                // },

                shared: {
                  "@angular/core": { singleton: true, strictVersion: true }, 
                  "@angular/common": { singleton: true, strictVersion: true }, 
                  "@angular/router": { singleton: true, strictVersion: true },

                  "ngx-toastr" : {singleton: true, strictVersion: true},
                  ...sharedMappings.getDescriptors()
                }

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

When running ng serve payment and ng serve shell I get this error :

Meanwhile if I dont specify the library in sharedMappings.register( "dirpath", --here--) and specify the library in shared object like this :

        shared: {
          "@angular/core": { singleton: true, strictVersion: true }, 
          "@angular/common": { singleton: true, strictVersion: true }, 
          "@angular/router": { singleton: true, strictVersion: true },
          "astrapay-library" : {
            singleton: true,
            import : "projects/astrapay-library/src/project"
          },
          "ngx-toastr" : {singleton: true, strictVersion: true},
          ...sharedMappings.getDescriptors()
        }

It works but the service is not singleton . Why am I getting this issue ?