Module Federation loadRemoteModule catch error E[n].get is not a function

[tbdavid94]

Hello Webpack contributors,

I have trouble with module federation when loadRemoteModule catch error E[n].get is not a function

Project 1: App Demo webpack config

new ModuleFederationPlugin({

        library: { type: "module" },

        // For remotes (please adjust)
        name: "appDemo",
        filename: "RemoteEntry.js",
        exposes: {
                  './AppDemo': './projects/app-demo/src/app/app.module.ts',
        },
        
        // For hosts (please adjust)
        // remotes: {
        
        // },
        
        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' },
              ...sharedMappings.getDescriptors()
        })
}),
sharedMappings.getPlugin()

Project 2: App Shell route config

{
    path: 'test-module',
    loadChildren: () =>
            loadRemoteModule({
                    type: 'module',
                    remoteEntry: 'http://localhost:8903/RemoteEntry.js',
                    exposedModule: './AppDemo',
            }).then((m) => {
                    console.log('cym mfe', m);
                    return m.AppModule;
            }).catch((e) => console.error('LOAD REMOTE MODULE ERROR', e)),
}

Thank you for your time and assistance.

Best regards,
david

[alexander-akait]

Looks like you don't have module federation chunk and want to use it, without additional infromation - like reproducible example we can't help

[tbdavid94]

@alexander-akait thansk for reply me, this is webpack.config.js in project 2

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

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

module.exports = {
    output: {
        uniqueName: "shell",
        publicPath: "auto",
    },
    optimization: {
        runtimeChunk: false
    },
    resolve: {
        alias: {
          ...sharedMappings.getAliases(),
        }
    },
    experiments: {
        outputModule: true
    },
    plugins: [
      new ModuleFederationPlugin({
      library: { type: "module" },
      
      // For remotes (please adjust)
      // name: "shell",
      // filename: "remoteEntry.js",
      // exposes: {
      // './Component': './projects/shell/src/app/app.component.ts',
      // },
      
      // For hosts (please adjust)
      remotes: {
      // "app1": "http://localhost:8001/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' },
          
          ...sharedMappings.getDescriptors()
      })
      
      }),
      sharedMappings.getPlugin()
      ],
};

[alexander-akait]

Can you create it using github repo?