Getting getNgModuleDef error in Angular micro frontend applications with multiple repo

Question

I have created Micro frontend angular applications in different repository.

Shell App - Repository 1

Mf1 App - Repository 2

Shell Webpack.config

  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': './/src/app/app.component.ts',
  // },

  // For hosts (please adjust)
  remotes: {

    users: "http://localhost:4201/remoteEntry.js",
  },

MF1 Webpack.config.ts

 module.exports = {
 output: {
 uniqueName: "users",
 publicPath: "auto",
 },
 optimization: {
  runtimeChunk: false,
  },
  resolve: {
  alias: {
  ...sharedMappings.getAliases(),
  },
  },
  experiments: {
  outputModule: true,
  },
  plugins: [
  new ModuleFederationPlugin({
  library: { type: "module" },

  // For remotes (please adjust)
  name: "users",
  filename: "remoteEntry.js",
  exposes: {
    "./Module": "././src/app/users/users.module.ts",
  },

  // For hosts (please adjust)
  // remotes: {
  //     "mfe1": "http://localhost:3000/remoteEntry.js",

  // },

  shared: share({

Shell App.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home/home.component';

const routes: Routes = [
{ path: '',  component: HomeComponent},
{ path: 'customers', loadChildren: () => 
import('./customers/customers.module').then(m => m.CustomersModule) },
{ path: 'users', loadChildren: () => import('users/Module').then(m => 
m.RemoteEntryModule) }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

When I tried to navigate to the MF1 app(users module) from shell using http://localhost:4200/users am getting below error

src_app_users_users_module_ts-_da931.js:1 ERROR Error: Uncaught (in promise): 
TypeError: Cannot read properties of undefined (reading 'ɵmod')
TypeError: Cannot read properties of undefined (reading 'ɵmod')
at getNgModuleDef (core.mjs:1261:29)
at new NgModuleRef (core.mjs:19900:29)
at NgModuleFactory.create (core.mjs:19937:16)
at router.mjs:4304:44
at map.js:7:37
at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
at OperatorSubscriber.next (Subscriber.js:31:18)
at subscribe.innerComplete (mergeInternals.js:25:28)
at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
at OperatorSubscriber.next (Subscriber.js:31:18)
at resolvePromise (zone.js:1214:31)
at resolvePromise (zone.js:1168:17)
at zone.js:1281:17
at _ZoneDelegate.invokeTask (zone.js:409:31)
at core.mjs:23999:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:23999:36)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Object.onInvokeTask (core.mjs:24300:33)
at _ZoneDelegate.invokeTask (zone.js:408:60)
at Zone.runTask (zone.js:178:47)

Answer 1

Changed RemoteEntryModule to UsersModule in app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home/home.component';

const routes: Routes = [
{ path: '',  component: HomeComponent},
{ path: 'customers', loadChildren: () => 
import('./customers/customers.module').then(m => m.CustomersModule) },
{ path: 'users', loadChildren: () => import('users/Module').then(m => 
m.UsersModule) }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }