Issue sharing custom libraries

[juandanielmorcilloregueiro]

Good afternoon,

I followed your tutorial to share a library. Library is located in a different project (not monorepo), and it is installed as npm dependency in two modules. I want to use this library to share data, so it contains a service with get/set methods to store values in a private variable.

Issue comes when I use the library in two modules. Looks like it is instantiated two times, because if I print the value in both modules, it has two different values at same time.

I´m using this config for the main module

sharedMappings.register( path.join(__dirname, 'tsconfig.json'), ['authentication-lib']);

module.exports = { output: { uniqueName: "crmEcApp", publicPath: "auto" }, optimization: { runtimeChunk: false }, resolve: { alias: { ...sharedMappings.getAliases(), } }, experiments: { outputModule: true }, plugins: [ new ModuleFederationPlugin({ library: { type: "module" }, remotes: { "userManagementApp": "userManagementApp@http://localhost:4501/remoteEntry.js", }, shared: share({ "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "authentication-lib": { singleton: true, eager:true, strictVersion: true, requiredVersion: 'auto' }, ...sharedMappings.getDescriptors() }) }), sharedMappings.getPlugin() ], };

And this config for the second module:

sharedMappings.register( path.join(__dirname, 'tsconfig.json'), ['authentication-lib']); module.exports = { output: { uniqueName: "userManagementApp", publicPath: "auto" }, optimization: { runtimeChunk: false }, resolve: { alias: { ...sharedMappings.getAliases(), } }, experiments: { outputModule: true }, plugins: [ new ModuleFederationPlugin({ library: { type: "module" }, name: "userManagementApp", filename: "remoteEntry.js", exposes: { './UserManagementComponent': './/src/app/user-management/user-management.component.ts', './AuthModule': './/src/app/app.module.ts' }, shared: share({ "@angular/core": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "@angular/router": { singleton: true, strictVersion: true, requiredVersion: 'auto' }, "authentication-lib": { singleton: true, eager: true, strictVersion: true, requiredVersion: 'auto' }, ...sharedMappings.getDescriptors() }) }), sharedMappings.getPlugin() ], };

Library that I´m trying to share is authentication-lib.

I found people with similar issue (like this), but I don´t know if I´m doing something wrong.

Thanks.

[mikezks]

Please try with eager: false for the remote. In general, be aware with eager in Angular setups at the moment. This leads to higher bundle sizes. There will be news and further guidance on this soon.