I have already working on a project which is in angular 17. i have added module federation using ng g @angular-architects/module-federation:init --type remote and ran the app using npm run serve and i am getting below error and in browser it is full blank. Please help.

consumes:201 Uncaught Error: Shared module is not available for eager consumption: 9716
        at __webpack_require__.m.<computed> (consumes:201:1)
        at __webpack_require__ (bootstrap:19:1)
        at 99947 (table-services.service.ts:20:34)
        at __webpack_require__ (bootstrap:19:1)
        at startup:5:1
    __webpack_require__.m.<computed>    @   consumes:201
    __webpack_require__ @   bootstrap:19
    99947   @   table-services.service.ts:20
    __webpack_require__ @   bootstrap:19
    (anonymous) @   startup:5

Webpack conf

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

module.exports = withModuleFederationPlugin({

  name: 'entity_management_fe',

  exposes: {
    './Component': './src/app/app.component.ts',
  },

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

});