How to expose the component using Module Federation that is located in the library Angular 17

I am working with a monorepo containing three Angular standalone applications. Each application has its own dedicated library, and within each library, I have defined several components. Some of these components need to be shared across applications using Module Federation. To achieve this, I have exported the required standalone components in the public-api.ts file of the respective library.

The challenge arises when I attempt to expose one of these components (e.g., PostboxComponent) in the webpack.config.js file of the app. When I import the exposed component in another app, it triggers an error in the browser:

ERROR TypeError: Cannot read properties of undefined (reading 'ɵcmp')


Below are relevant snippets:

public-api.ts (lib-app1)

export * from './lib/postbox/postbox.component';
export * from './lib/task-management.module';
export * from './store/configuration';


Webpack.config.js (app1)

const { shareAll, withModuleFederationPlugin} = require('@angular-architects/module-federation/webpack');
module.exports = withModuleFederationPlugin({

name: 'task',

exposes: {
'./postbox': './projects/lib-app1/lib/postbox/postbox.component.ts',
},

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



I'm trying to add sharedMappings: ['lib-app1'] , but it's not working.

How can I expose correctly the component?

Continue reading...