Cannot load multiple modules and components from an Angular microapp

Question

I'm trying to load an Angular remote component in another shell application, but I get:

TypeError: Cannot read properties of undefined (reading 'get') and TypeError: Cannot read properties of undefined (reading 'init') errors.

The microapp webpack.config.js looks like:

module.exports = withModuleFederationPlugin({
  name: "myMicroAppName",
  exposes: {
    exportBundle: "./projects/micro-app/src/public-api.ts",
    AppModule: "./projects/micro-app/src/app/app.module.ts",
    AppComponent: "./projects/micro-app/src/app/app.component.ts",
  },
  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: "auto",
    }),
  },
});

The way, how I'm trying to load the exposed module and component:

loadRemoteModule({
  remoteName: 'myMicroAppName',
  exposedModule: 'exportBundle',
  remoteEntry: 'http://localhost:4201/remoteEntry.js',
})

I want to inject this AppComponent into a dialog, so routing is not a solution for me.

I was able to make it work with the following:

loadRemoteModule({
  type: 'module',
  exposedModule: 'AppModule',
  remoteEntry: 'http://localhost:4201/remoteEntry.js',
})

but this way, I cannot get AppComponent. How can I get all the exported things from my public-api.ts file.

Answer 1

I think I found the solution.

loadRemoteModule({
  type: 'module',
  exposedModule: 'exportBundle',
  remoteEntry: 'http://localhost:4201/remoteEntry.js',
})

That actually returns both objects that I exported in public-api.ts