How can share statefull singlenton Angular service with Webpack Module Federation?

48 Views Asked by At

I am using Angular 17.1, Nx 18, webpack 5 Module Federation.

I can't share as a singleton service every mfe create new instance.

What am I doing wrong? Please help :)

project directory text

tsconfig.base.json

{
"compileOnSave": false,
"compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
        "@workspace/util": ["libs/util/src/index.ts"]
    }
},
"exclude": ["node_modules", "tmp"]

host webpack.config.js

module.exports = {
plugins: [
    new ModuleFederationPlugin({
        shared: {
            "@angular/core": {
                    "singleton": true
            },
            "@angular/common": {
                    "singleton": true
            },
            "@angular/router": {
                    "singleton": true
            },
            "@workspace/util": {
                    "singleton": true,
                    "import": "libs/util/src/index"
            },
            "rxjs": {
                    "singleton": true
            },
        }
    }),
],

mfe webpack.config.js

module.exports = {
output: {
    publicPath: 'auto',
    uniqueName: 'md',
    scriptType: 'text/javascript',
},
optimization: {
    runtimeChunk: false,
},
plugins: [
    new ModuleFederationPlugin({
        name: 'md',
        library: { type: 'var', name: 'md' },
        filename: 'remoteEntry.js',
        exposes: {
            MainApp: './apps/md/src/bootstrap.ts',
        },
        shared: {
            "@angular/core": {
                    "singleton": true
            },
            "@angular/common": {
                    "singleton": true
            },
            "@angular/router": {
                    "singleton": true
            },
            "@workspace/util": {
                    "singleton": true,
                    "import": "libs/util/src/index"
            },
            "rxjs": {
                    "singleton": true
            },
        }
    }),
],

Related Question enter link description here

I also try withModuleFederationPlugin (@angular-architects/module-federation/webpack) with config shareAll but result doesn't change

0

There are 0 best solutions below